config 中增加让 rn 导航配置透传 && 解决 rn 兼容性问题 && 增加相关 api

packages/taro-rn-transformer/src/app.ts

@@ -18,8 +18,11 @@ function getPagesResource (appPath: string, basePath: string, pathPrefix: string
     importPages.push(importScreen)
     screenPages.push(pagePath)
     const configFile = getConfigFilePath(path.join(basePath, pagePath))
+    const screenConfigName = `${screenName}Config`
     if (fs.existsSync(configFile)) {
-      importConfigs.push(`import '.${pathPrefix}${pagePath}.config'`)
+      importConfigs.push(`import ${screenConfigName} from '.${pathPrefix}${pagePath}.config'`)
+    } else {
+      importConfigs.push(`const ${screenConfigName} = {}`)
     }
   })
   return {
@@ -29,20 +32,10 @@ function getPagesResource (appPath: string, basePath: string, pathPrefix: string
   }
 }
 
-function getPageScreen (pagePath: string, basePath: string) {
-  const configPath = path.join(basePath, pagePath)
+function getPageScreen (pagePath: string) {
   const screen = camelCase(pagePath)
-  const pageConfig = getPageConfig(configPath)
-  pageConfig.pagePath = pagePath
-  const configString = JSON.stringify(pageConfig)
-
-  return `{name:'${screen}',pagePath:'${pagePath}',component:createPageConfig(${screen},${configString})}`
-}
-
-function getPageConfig (resourcePath: string) {
-  if (!resourcePath) return {}
-  const content = getConfigContent(resourcePath)
-  return content
+  const screenConfigName = `${screen}Config`
+  return `{name:'${screen}',pagePath:'${pagePath}',component:createPageConfig(${screen},{...${screenConfigName},pagePath:'${pagePath}'})}`
 }
 
 function getAppConfig (appPath: string) {
@@ -90,10 +83,10 @@ export default function generateEntry ({
   const basePath = path.join(projectRoot, sourceDir)
   const appPath = path.join(projectRoot, sourceDir, entryName)
 
-  const appConfig = getAppConfig(appPath)
-  appConfig.designWidth = designWidth
-  appConfig.deviceRatio = deviceRatio
-
+  const appConfig = {
+    designWidth,
+    deviceRatio
+  }
   const pathPrefix = filePath.indexOf(sourceDir) > -1 ? '' : `/${sourceDir}`
   const pages = getPagesResource(appPath, basePath, pathPrefix)
   const importPageList = pages.importPages.join(';')
@@ -109,15 +102,16 @@ export default function generateEntry ({
 
   const code = `import 'react-native/Libraries/polyfills/error-guard'
   import { AppRegistry } from 'react-native'
-  import { createReactNativeApp } from '@tarojs/runtime-rn'
-  import { createPageConfig } from '@tarojs/runtime-rn'
+  import { createReactNativeApp, createPageConfig } from '@tarojs/runtime-rn'
   import Component from '${appComponentPath}'
   ${importPageList}
-  ${process.env.NODE_ENV === 'development' ? `import '${appComponentPath}.config';${importPageConfig};` : ''}
+  ${`import AppComponentConfig from '${appComponentPath}.config';`}
+  ${importPageConfig}
 
-  var config = ${JSON.stringify({ appConfig: appConfig })}
+  const buildConfig = ${JSON.stringify(appConfig)}
+  const config = { appConfig: { ...buildConfig, ...AppComponentConfig } }
   global.__taroAppConfig = config
-  config['pageList'] = [${routeList.map(pageItem => getPageScreen(pageItem, basePath))}]
+  config['pageList'] = [${routeList.map(pageItem => getPageScreen(pageItem))}]
   AppRegistry.registerComponent('${appName}',() => createReactNativeApp(Component,config))
   `
   return code

packages/taro-rn/src/api/index.ts

@@ -29,7 +29,12 @@ export {
   hideNavigationBarLoading,
   setTabBarStyle,
   getApp,
-  pxTransform
+  pxTransform,
+  startPullDownRefresh,
+  stopPullDownRefresh,
+  pageScrollTo,
+  setBackgroundColor,
+  setBackgroundTextStyle
 } from '@tarojs/runtime-rn'
 
 export * from './request'

packages/taro-router-rn/src/navigationBar.ts

@@ -41,12 +41,15 @@ export function setNavigationBarTitle (option: NavigateBarTitleOption): Promise<
 export function setNavigationBarColor (option: NavigateBarColorOption): Promise<CallbackResult> {
   const { backgroundColor, frontColor, fail, success, complete } = option
   let msg
-  const params = {
-    headerStyle: {
-      backgroundColor: backgroundColor
-    },
+  const options: any = navigationRef.current?.getCurrentOptions()
+  const defaultStyle = options?.headerStyle || {}
+  const headerStyle = Object.assign({}, defaultStyle, {
+    backgroundColor: backgroundColor
+  })
+  const params = Object.assign({}, options, {
+    headerStyle: headerStyle,
     headerTintColor: frontColor
-  }
+  })
   try {
     // 如果是tabbar，设置会不生效，设置setParams ,触发tab header更新
     if (isTabPage()) {

packages/taro-router-rn/src/provider.ts

@@ -25,18 +25,36 @@ export class PageProvider extends React.Component<any> {
   componentDidMount (): void {
     const { navigation, pageConfig } = this.props
     const config = globalAny.__taroAppConfig?.appConfig || {}
-    const winOptions = config.window
-    const title = pageConfig.navigationBarTitleText || winOptions?.navigationBarTitleText || ''
-    const color = pageConfig.navigationBarTextStyle || winOptions?.navigationBarTextStyle || 'black'
-    const bgColor = pageConfig.navigationBarBackgroundColor || winOptions?.navigationBarBackgroundColor || '#ffffff'
-    const navBarParams = {
-      title: title,
-      headerShown: (pageConfig?.navigationStyle || winOptions?.navigationStyle) !== 'custom',
-      headerStyle: {
-        backgroundColor: bgColor
-      },
+    const winOptions = config.window || {}
+    const winRnOptions = config.rn || {} // 全局的rn config
+    // 多个config的优先级问题，页面rnConfig> 页面config > app.config中rnConfig > app.config.window
+    const winScreenOptions = this.isTabBarPage() ? {} : (winRnOptions?.screenOptions || {})
+    const { title = '', headerTintColor = '', headerStyle = {}, headerShown = false } = winScreenOptions
+
+    const winRnTitle = this.isTabBarPage() ? winRnOptions?.options?.title || '' : title
+
+    const headerTitle = pageConfig.navigationBarTitleText || winRnTitle || winOptions?.navigationBarTitleText || ''
+    const color = pageConfig.navigationBarTextStyle || headerTintColor || winOptions?.navigationBarTextStyle || 'black'
+    const bgColor = pageConfig.navigationBarBackgroundColor || headerStyle?.backgroundColor || winOptions?.navigationBarBackgroundColor || '#ffffff'
+    const customHeader = pageConfig?.navigationStyle !== 'custom' || headerShown || winOptions?.navigationStyle !== 'custom'
+
+    const rnConfig = pageConfig?.rn || {}
+    const screenOptions = rnConfig.screenOptions || {}
+    const screenHeaderStyle = screenOptions?.headerStyle || {}
+
+    screenOptions.headerStyle = Object.assign({}, {
+      backgroundColor: bgColor,
+      shadowOffset: { width: 0, height: 0 },
+      borderWidth: 0,
+      elevation: 0,
+      shadowOpacity: 1,
+      borderBottomWidth: 0
+    }, screenHeaderStyle)
+    const navBarParams = Object.assign(winScreenOptions, {
+      title: headerTitle,
+      headerShown: customHeader,
       headerTintColor: color
-    }
+    }, screenOptions)
     // 页面的config
     if (pageConfig) {
       if (this.isTabBarPage()) {

packages/taro-router-rn/src/router.ts

@@ -9,7 +9,7 @@ import { navigationRef } from './rootNavigation'
 import CustomTabBar from './view/TabBar'
 import HeadTitle from './view/HeadTitle'
 import BackButton from './view/BackButton'
-import { getTabItemConfig, getTabVisible } from './utils/index'
+import { getTabItemConfig, getTabVisible, setTabConfig } from './utils/index'
 
 interface WindowConfig {
   pageOrientation?: 'auto' | 'portrait' | 'landscape'
@@ -47,11 +47,19 @@ interface PageItem {
   pagePath: string
 }
 
+interface RNConfig{
+  linking?: string[],
+  screenOptions?: Record<string, any>,
+  tabBarOptions?: Record<string, any>,
+  options?: Record<string, any>
+}
+
 export interface RouterConfig {
   pages: PageItem[],
   tabBar?: ITabBar,
   window?: WindowConfig,
-  linkPrefix?: string[]
+  linkPrefix?: string[],
+  rnConfig?: RNConfig
 }
 
 export function createRouter (config: RouterConfig): React.ReactNode {
@@ -102,12 +110,17 @@ function getStackOptions (config: RouterConfig) {
   const headColor = windowOptions.navigationBarTextStyle || 'black'
   const bgColor = windowOptions.navigationBarBackgroundColor || '#ffffff'
   const headerTitleAlign: StackHeaderOptions['headerTitleAlign'] = 'center'
-  return {
+  const defaultOptions = {
     title: title,
     headerShown: windowOptions.navigationStyle !== 'custom',
     headerTitle: (props) => getHeaderView(title, headColor, props),
     headerStyle: {
-      backgroundColor: bgColor
+      backgroundColor: bgColor,
+      shadowOffset: { width: 0, height: 0 },
+      borderWidth: 0,
+      elevation: 0,
+      shadowOpacity: 1,
+      borderBottomWidth: 0
     },
     headerTintColor: headColor,
     cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
@@ -119,6 +132,9 @@ function getStackOptions (config: RouterConfig) {
       return React.createElement(BackButton, { tintColor }, null)
     }
   }
+  const rnConfig = config.rnConfig || {}
+  const screenOptions = rnConfig?.screenOptions || {}
+  return Object.assign({}, defaultOptions, screenOptions)
 }
 
 function getTabItem (config: RouterConfig, tabName: string) {
@@ -141,9 +157,13 @@ function getTabItem (config: RouterConfig, tabName: string) {
 function createTabStack (config: RouterConfig, parentProps: any) {
   const Tab = createBottomTabNavigator()
   const tabBar = config.tabBar
+  const rnConfig = config.rnConfig
   const tabList: any = []
+  const userOptions: Record<string, any> = rnConfig?.options || {}
   tabBar?.list.forEach((item, index) => {
-    const tabItemOptions = Object.assign({}, { tabBarVisible: config.tabBar?.custom ? false : getTabVisible() }, getTabItemOptions(item, index))
+    const defaultOptions = Object.assign({}, { tabBarVisible: config.tabBar?.custom ? false : getTabVisible() }, getTabItemOptions(item, index))
+    const tabItemOptions = Object.assign({}, defaultOptions, userOptions)
+    setTabConfig('tabBarVisible', tabItemOptions.tabBarVisible)
     const path = item.pagePath.startsWith('/') ? item.pagePath : `/${item.pagePath}`
     const tabName = camelCase(path)
     const tabPage: PageItem = getTabItem(config, tabName) as PageItem
@@ -156,31 +176,33 @@ function createTabStack (config: RouterConfig, parentProps: any) {
     })
     tabList.push(tabNode)
   })
+
+  const userTabBarOptions = rnConfig?.tabBarOptions || {}
   // tabbarOptions
-  const tabBarOptions = {
+  const tabBarOptions = Object.assign({
     backBehavior: 'none',
     activeTintColor: tabBar?.selectedColor || '#3cc51f',
     inactiveTintColor: tabBar?.color || '#7A7E83',
     activeBackgroundColor: tabBar?.backgroundColor || '#ffffff',
     inactiveBackgroundColor: tabBar?.backgroundColor || '#ffffff',
     style: tabBar?.borderStyle ? { backgroundColor: tabBar.borderStyle } : {}
-  }
+  }, userTabBarOptions)
 
   return React.createElement(Tab.Navigator,
     {
       tabBarOptions: tabBarOptions,
-      tabBar: (props) => createTabBar(props),
+      tabBar: (props) => createTabBar(props, userOptions),
       children: tabList
     },
     tabList)
 }
 
-function createTabBar (props) {
-  return React.createElement(CustomTabBar, { ...props })
+function createTabBar (props, userOptions) {
+  return React.createElement(CustomTabBar, { ...props, userOptions })
 }
 
 function getLinkingConfig (config: RouterConfig) {
-  const prefixes = config.linkPrefix || []
+  const prefixes = config?.rnConfig?.linking || config.linkPrefix || []
 
   const screens: Record<string, string> = {}
   const pageList = getPageList(config)
@@ -265,7 +287,6 @@ function createStackNavigate (config: RouterConfig) {
     screenChild.push(screenNode)
   })
   const linking = getLinkingConfig(config)
-
   const stackNav = React.createElement(Stack.Navigator,
     { screenOptions: getStackOptions(config), children: screenChild }, screenChild)
   return React.createElement(NavigationContainer, { ref: navigationRef, linking: linking, children: stackNav }, stackNav)

packages/taro-router-rn/src/tabBar.ts

@@ -1,4 +1,4 @@
-import { successHandler, errorHandler } from './utils/index'
+import { successHandler, errorHandler, setTabConfig } from './utils/index'
 import { CallbackResult, TaroTabBarConfig, BaseOption } from './utils/types'
 import { navigationRef } from './rootNavigation'
 
@@ -47,10 +47,8 @@ function setTabBarItemConfig (index, obj) {
 export function showTabBar (options: TabBarOptions = {}): Promise<CallbackResult> {
   const { fail, success, complete, animation = true } = options
   let msg
-  const tabBarConfig = globalAny.__taroTabBarIconConfig
-  tabBarConfig.tabBarVisible = true
-  tabBarConfig.needAnimate = animation
-  globalAny.__taroTabBarIconConfig = tabBarConfig
+  setTabConfig('tabBarVisible', true)
+  setTabConfig('needAnimate', animation)
   try {
     navigationRef.current?.setOptions({
       tabBarVisible: true
@@ -66,13 +64,11 @@ export function showTabBar (options: TabBarOptions = {}): Promise<CallbackResult
 export function hideTabBar (options: TabBarOptions = {}): Promise<CallbackResult> {
   const { fail, success, complete, animation = true } = options
   let msg
-  const tabBarConfig = globalAny.__taroTabBarIconConfig
-  tabBarConfig.tabBarVisible = false
-  tabBarConfig.needAnimate = animation
-  globalAny.__taroTabBarIconConfig = tabBarConfig
+  setTabConfig('tabBarVisible', false)
+  setTabConfig('needAnimate', animation)
   try {
     navigationRef.current?.setOptions({
-      tabBarVisible: true
+      tabBarVisible: false
     })
   } catch (error) {
     msg = error
@@ -169,9 +165,7 @@ export function setTabBarItem (options: TabBarItem): Promise<CallbackResult> {
 export function setTabBarStyle (option: TabBarStyleOption): Promise<CallbackResult> {
   const { backgroundColor, borderStyle, color, selectedColor, fail, success, complete } = option
   let msg
-  const tabBarConfig = globalAny.__taroTabBarIconConfig
-  tabBarConfig.tabStyle = { backgroundColor, borderStyle, color, selectedColor }
-  globalAny.__taroTabBarIconConfig = tabBarConfig
+  setTabConfig('tabStyle', { backgroundColor, borderStyle, color, selectedColor })
   try {
     // 设置tabBarIcon 只是为了触发导航的tabbar的更新
     navigationRef.current?.setOptions({

packages/taro-router-rn/src/utils/index.ts

@@ -74,6 +74,12 @@ export function getTabConfig (key: string): any {
   return _taroTabBarIconConfig[key]
 }
 
+export function setTabConfig (key: string, value: unknown) {
+  const tabBarConfig = globalAny.__taroTabBarIconConfig
+  tabBarConfig[key] = value
+  globalAny.__taroTabBarIconConfig = tabBarConfig
+}
+
 export function getTabVisible (): boolean {
   return getTabConfig('tabBarVisible')
 }

packages/taro-router-rn/src/view/Badge.tsx

@@ -24,7 +24,7 @@ export default class Badge extends React.PureComponent<BadgeProps, BadgeState> {
     }
   }
 
-  UNSAFE_componentWillReceiveProps (nextProps:BadgeProps):void {
+  UNSAFE_componentWillReceiveProps (nextProps: BadgeProps): void {
     const { visible, opacity } = this.state
     const curVisible = nextProps.visible
     if (curVisible !== visible) {