不使用 SafeAreaView 时如何更改 React Native 中的背景颜色？答案

【问题标题】：How change background color in React Native when NOT using SafeAreaView?不使用 SafeAreaView 时如何更改 React Native 中的背景颜色？
【发布时间】：2022-06-10 20:17:29
【问题描述】：

如何在此处更改“iPhone 应用切换器”底栏的颜色：

我想构建一个全屏应用，所以我没有使用SafeAreaView。

这是我的主屏幕/布局组件：

const Screen = (props: any): React.ReactElement => {
  const { backgroundColor = 'white' } = props
  return (
    <>
      <View
        style={[styles.container, { backgroundColor }]}
      >
        <StatusBar
          backgroundColor={backgroundColor === 'black' ? 'black' : 'white'}
          barStyle={backgroundColor === 'black' ? 'light-content' : 'dark-content'}
        />
        {props.children}
      </View>
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  }
})

【问题讨论】：

在您提供的代码的屏幕视图样式中添加flex: 1 就足够了。我不认为这对您的场景来说已经足够了。您能否分享完整的代码，以便在您提供的图像中重现该场景？
@DavidScholz 谢谢！我实际上已经有flex:1，请参阅更新的代码示例。

标签： react-native safeareaview

【解决方案1】：

Flex:1 在这种情况下应该可以工作，但是您可以尝试将设备高度作为可能解决问题的高度

const styles = StyleSheet.create({
  container: {
    height: Dimensions.get('screen').height,
    width: Dimensions.get('screen').width,
    justifyContent: 'center'
  }
})

编辑：再三考虑，您是否将 SafeAreaView 设置为底部选项卡？你能分享你的底部标签代码吗？

另外，您将背景颜色设置为 "white"，因此如果您不传递任何背景颜色，它应该显示为白色，请尝试将其更改为 "black"

const { backgroundColor = 'white' } = props

【讨论】：

【解决方案2】：

只需要像这样更改标签栏backroundColor

 <MainTab.Navigator
      screenOptions={{
        tabBarStyle:{
          backgroundColor:"black" //like this
        }
      }}>

  {...MaintabScreens}

</MainTab.Navigator>

【讨论】：

【解决方案3】：

如果您不使用 SafeAreaView，则需要使用 flex:1 拉伸最外层的视图，以提供黑色的最大空间

    return (
     <View
        style={{ backgroundColor, flex:1 }}
      >
        <StatusBar
          backgroundColor={backgroundColor === 'black' ? 'black' : 'white'}
          barStyle={backgroundColor === 'black' ? 'light-content' : 'dark-content'}
        />
      </View>
  )

我希望你觉得这很有用。

【讨论】：