javascript - 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 文档中，您可以同时使用sceneStyleor和（仅用于）。getSceneStyleRouterScenegetSceneStyleRouter

编辑

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

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

对于您Scene的 s，您可以将一个对象或StyleSheet对象传递给sceneStyle或使用getSceneStyle（确保您传递一个像上面这样的函数）：

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

这将覆盖蓝色背景。