React Native + react-native-router-flux：为什么过渡时背景颜色是白色的？答案

【问题标题】：React Native + react-native-router-flux: Why is background color white during transition?React Native + react-native-router-flux：为什么过渡时背景颜色是白色的？
【发布时间】：2017-01-30 08:41:08
【问题描述】：

我有两个场景，登录和主页，两者的背景颜色都设置为黑色。但是在过渡期间，当卸载和安装时，似乎还有另一个背景是白色的。

有没有办法弄清楚背景是什么并将颜色也改为黑色？

这是我的设置：

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

    export default class App extends Component {
      render() {
        return (
          <Provider store={store}>
            <RouterWithRedux>
              <Scene key='root'>
                <Scene component={Login} initial={true} key='login' sceneStyle={{backgroundColor: 'black'}} title='Login'/>
                <Scene component={Home} direction='vertical' key='Home' sceneStyle={{backgroundColor: 'black'}} title='Home'/>
              </Scene>
            </RouterWithRedux>
          </Provider>
        )
      }
    }

以及带有白色显示的过渡图像，有点难以看到，但如果您看到右上角的电池图标，则右侧和顶部的登录场景顶部有空白区域（如从登录到主页，以及登录正在卸载，所以是半透明的黑色）：

【问题讨论】：

标签： javascript ios reactjs react-native react-native-router-flux

【解决方案1】：

将函数传递给返回样式或StyleSheet 对象的getSceneStyle。

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

下面不要做，直接把prop传递给RouterWithRedux，connect会传递给Router组件：

const RouterWithRedux = connect()(<Router sceneStyle={{backgroundColor: 'black'}}/>)

【讨论】：