React Native：如何在react-native-router-flux中为整个应用程序和单个场景设置背景颜色？

Question

在使用react-native-router-flux的React Native中，如何为整个应用程序以及单个场景设置背景颜色？

这是我目前的设置：

const RouterWithRedux = connect()(Router)
const store = configureStore()

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <RouterWithRedux>
          <Scene key='root'>
            <Scene initial={true} key='login' component={Login} title='Login Page'/>
            <Scene key='register' component={Register} title='Register'/>
          </Scene>
        </RouterWithRedux>
      </Provider>
    )
  }
}

谢谢

Answer 1

在API documentation中，您可以sceneStyle和getSceneStyle使用Router或Scene getSceneStyle Router虽然）。

修改

在Router中，您只能使用getSceneStyle并且必须传递功能：

// ..
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => {
  const style = {
    backgroundColor: 'blue',
  };
  return style;
};
// ..
<Router getSceneStyle={getSceneStyle} {...otherProps}>
// ..

对于Scene，您只需将对象或StyleSheet对象传递给sceneStyle或使用getSceneStyle（确保传递上述功能）：

<Scene
  key="my-scene"
  component={MyScene}
  sceneStyle={{
    backgroundColor: 'red',
  }}
  title="My Scene"  />

这将覆盖蓝色背景。