javascript - react native : How to set background color for the whole app and individual scene in 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 ，您可以在 Router 和 Scene 上使用 sceneStyle 或 getSceneStyle(仅 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"  />

这将覆盖蓝色背景。