如何在 React Native 中更改默认背景颜色

Question

我最近从 RN 0.60 更新到 0.65，经过数小时的调试后，我可以让我的应用重新构建和运行。但是，由于某种原因，我的应用的背景颜色已从白色变为灰色。

我正在使用 react-native-router-flux 进行导航，但要么样式在最新的 react-native 版本中被破坏，要么我遗漏了一些明显的东西。

它一直是这样设置的：

const RouterComponent = () => {
  const sceneConfig = {
    cardStyle: {
      backgroundColor: 'white',
    },
  };

  return (
    <Router {...sceneConfig}/>
    [...]
    </Router>

这不再做任何事情。以下是我尝试过的其他方法：

• 使用sceneStyle 直接将样式属性添加到<Router>，如the docs 中推荐的那样
• 使用style属性直接为每个单独的场景添加样式属性

这些方法都不起作用，我现在被一个在每个屏幕上都有灰色背景 (#f2f2f2) 的应用程序困住了。我什至不确定这是否是 react-native-router-flux 的问题，但这似乎是最可能的原因。

深入研究 Github 存储库上的问题，我发现有人指出这可能与 react-native-screens 不兼容，这似乎是由于升级到 RN 0.65 而添加到我的项目中的。这是在黑暗中拍摄的，因为我什至不确定该库的用途。

有没有人设法在 RN 0.65 和 react-native-router-flux v4.3.0 上更改其应用的背景颜色？

编辑：

以下是我尝试为单个场景设置样式的示例，但没有成功：

          <Scene
            title={'Profile'}
            renderTitle={() => <View />}
            // Neither of the below options has any effect
            sceneStyle={{backgroundColor: 'red'}}
            style={{backgroundColor: 'red'}}
            key="profile"
            hideNavBar
            icon={TabIcon}
            iconName="account-circle-outline"
            back={false}
            component={Profile}
          />

Answer 1

我建议您创建一个包装器组件并将您的页面包装在其上以轻松管理规范。

这是我在应用程序中使用它的方式：

const MainView = ({children}) => {
  return (
    <View style={styles.container}>{children}</View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ff0",
  },
});

现在，在其他屏幕中使用这个组件，例如在HomeScreen：

const HomeScreen = () => {
  // rest of the codes ...

  return (
    <MainView>
      // rest of the codes ...
    </MainView>
  )
}

您甚至可以通过道具将容器样式传递给MainView，而不是在其上创建样式。这样就可以在不同的屏幕中传递不同的样式。