Merge pull request #4850 from Fantasy9527/feat/rn_backgroundColor

feat: 在rn环境下,app.js config 下的 window属性支持配置backgroundColor
NervJS · Nov 26, 2019 · 17e0271 · 17e0271
2 parents adf8864 + 2bea8b7
commit 17e0271
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/docs/tutorial.md b/docs/tutorial.md
@@ -156,7 +156,7 @@ class App extends Component {
 | navigationBarTextStyle | ✔️ | ✔️|✔️|  ✘ |✔️|✔️|
 | navigationBarTitleText | ✔️ | ✔️|✔️| ✔️ |✔️|✔️|
 | navigationStyle | ✔️（微信客户端 6.6.0） | ✔️（百度 App 版本 11.1.0）|✔️|  ✘ | ✘| ✘|
-| backgroundColor | ✔️ | ✔️|✔️| ✘ |✘|✘|
+| backgroundColor | ✔️ | ✔️|✔️| ✘ |✘|✔️|
 | backgroundTextStyle | ✔️ | ✔️|✔️| ✘ |✘|✘|
 | backgroundColorTop |✔️（微信客户端 6.5.16） | ✘|✔️| ✘ |✘|✘|
 | backgroundColorBottom | ✔️（微信客户端 6.5.16） | ✘|✔️| ✘ |✘|✘|

diff --git a/packages/taro-router-rn/src/initRouter.js b/packages/taro-router-rn/src/initRouter.js
@@ -37,7 +37,21 @@ function getRootStack ({pageList, Taro, navigationOptions}) {
     const Screen = v[1]
     RouteConfigs[pageKey] = getWrappedScreen(Screen, Taro, navigationOptions)
   })
-  return createStackNavigator(RouteConfigs, {headerLayoutPreset: 'center'})
+
+  // 让rn支持背景颜色设置,支持透明色
+  let stackNavigatorOptions = navigationOptions.stackNavigatorOptions || {}
+  let navigatorOptions = {
+    cardStyle: { // 第一层颜色设置
+      backgroundColor: navigationOptions.backgroundColor
+    },
+    transitionConfig: () => ({
+      containerStyle: { // 第二层颜色设置
+        backgroundColor: navigationOptions.backgroundColor
+      }
+    }),
+    ...stackNavigatorOptions
+  }
+  return createStackNavigator(RouteConfigs, {headerLayoutPreset: 'center', ...navigatorOptions})
 }
 
 function getRootStackPageList ({pageList, tabBar, currentTabPath}) {

diff --git a/packages/taro-router-rn/src/utils.js b/packages/taro-router-rn/src/utils.js
@@ -4,7 +4,9 @@ export const HEADER_CONFIG_MAP = {
   navigationBarBackgroundColor: 'backgroundColor', // 导航栏背景颜色
   enablePullDownRefresh: 'enablePullDownRefresh', // 是否全局开启下拉刷新，暂时放这里吧
   navigationStyle: 'navigationStyle', // 导航栏样式，仅支持以下值：default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮
-  disableScroll: 'disableScroll' // 设置为 true 则页面整体不能上下滚动；只在页面配置中有效，无法在 app.json 中设置该项
+  disableScroll: 'disableScroll', // 设置为 true 则页面整体不能上下滚动；只在页面配置中有效，无法在 app.json 中设置该项
+  backgroundColor: 'backgroundColor', // 容器背景颜色
+  stackNavigatorOptions: 'stackNavigatorOptions' // 支持直接透传createStackNavigator方法的配置
 }
 
 export function getNavigationOptions (config = {}) {