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文檔中 ，您可以在Router和Scene上使用sceneStyle或getSceneStyle （雖然只有Router getSceneStyle ）。

編輯

在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"  />

這將覆蓋藍色背景。