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 中，您可以在Router 和Scene 上使用sceneStyle 或getSceneStyle（尽管Router 只能使用getSceneStyle）。

编辑

在Router 中只能使用getSceneStyle 并且必须传递一个函数：

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

对于您的Scenes，您可以将一个对象或StyleSheet 对象传递给sceneStyle 或使用getSceneStyle（确保您传递一个类似上述的函数）：

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

这将覆盖蓝色背景。