0

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

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

以下是它一直以来的设置方式：

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

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

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

  • 按照文档中的建议，直接将样式属性添加到<Router>usingsceneStyle
  • style使用属性直接将样式属性添加到每个单独的场景

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

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

有没有人设法在 RN 0.65 和react-native-router-fluxv4.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}
          />
4

1 回答 1

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>
  )
}

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

于 2021-11-01T06:55:58.690 回答