React Native SafeAreaView 背景颜色 - 如何为屏幕的顶部和底部分配两种不同的背景颜色？

Question

我使用的是 React Native 0.50.1 中的 SafeAreaView，除了一部分之外，它的工作非常好。我为 SafrAreaView 指定了橙色背景颜色，但无法将底部不安全区域背景更改为黑色。

这是代码，我包括了预期结果和实际结果。使屏幕底部变成黑色而不是橙色的最佳方法是什么？

import {
  ...
  SafeAreaView
} from 'react-native';
class Main extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <App />
      </SafeAreaView>
    )
  }
}
const styles = StyleSheet.create({
  ...,
  safeArea: {
    flex: 1,
    backgroundColor: '#FF5236'
  }
})

我想要橙色上衣和黑色下装。

但下面是我现在得到的。

Answer 1

我能够通过使用一些绝对位置黑客来解决这个问题。请参阅以下调整。无论如何都不是未来的证明，但它解决了我遇到的问题。

import {
  ...
  SafeAreaView,
  View
} from 'react-native';
class Main extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <App />
        <View style={styles.fixBackground} />
      </SafeAreaView>
    )
  }
}
const styles = StyleSheet.create({
  ...,
  safeArea: {
    flex: 1,
    backgroundColor: '#FF5236'
  },
  fixBackground: {
    backgroundColor: 'orange',
    position: 'absolute',
    bottom: 0,
    right: 0,
    left: 0,
    height: 100,
    zIndex: -1000,
  }
})

Answer 2

我刚刚运行遇到了同样的问题，我们在顶部有一个导航栏，在底部有一个标签栏，具有两种不同的背景颜色。

我的解决方案是用正确的背景色将标签栏组件包装在 SafeAreaView 中，同时将导航栏组件包装在自己的 SafeAreaView 和背景色中。

return (
  <SafeAreaView style={{ backgroundColor: 'white' }}>
    <Animated.View style={heightAnim}>
      {...navBarComponentStuff}
    </Animated.View>
  </SafeAreaView>)

对于导航栏

这是标签栏：

<SafeAreaView style={this.props.tabBarStyle}> //Some dark grey color is passed here
  <Animated.View style={heightAnim}>
    {tabBarItems.map(render tabs.....}
  </Animated.View>
</SafeAreaView>}

因此，话虽这么说，您可以将导航组件包装在 SafeAreaView 中，并在样式中设置 o运行ge 颜色，并将主要内容包装在另一个 SafeAreaView 中使用黑色作为背景颜色样式，或您选择的任何颜色。

有一件事你应该知道，如果你在同一个组件中添加两个 SafeAreaView，例如：

return (
  <View style={styles.container}>
    <SafeAreaView style={{ backgroundColor: 'white' }}>
      <NavigationBarComponent />
    </SafeAreaView>
    <SafeAreaView style={this.props.tabBarStyle}>
      <Animated.View style={heightAnim}>
        <Animated.View style={[styles.tabBar, this.props.tabBarStyle]}>
          {map and render tabs}
        </Animated.View>
      </Animated.View>
    </SafeAreaView>
  </View>
);

它将两个 SafeAreaView 结合起来，或者至少在我看来是这样的，也许对此有更多经验的人可以解释在这种情况下会发生什么。

这将我的标签栏推到屏幕顶部，并在我这样做时将背景颜色设置为白色。

但是将顶部 SafeAreaVeiw 移动到 NavigationBarComponent 给了我想要的效果。

对于那些可能感兴趣的人，也许这就是为什么它在同一个视图中将其中两个表现得很时髦的原因，AnimatedView 是因为我们有时会隐藏导航栏和标签栏。

Answer 3

我运行遇到了同样的问题，并且能够通过以下方式解决：

const styles = StyleSheet.create({
  outerWrapper: {
    backgroundColor: 'orange',
  },
  innerWrapper: {
    backgroundColor: 'black',
  },
});

// snip

const MyComponent = ({ content }) => (
  <View style={styles.outerWrapper}>
    <SafeAreaView />

    <SafeAreaView style={styles.innerWrapper}>
      {content}
    </SafeAreaView>
  </View>
);

outerWrapper 在顶部应用 o运行ge 背景颜色。第一个 <SafeAreaView /> 将第二个向下推，使其从 "safe area" 的开头开始（在状态栏下方）。然后第二个 SafeAreaView 占据屏幕的其余部分（包括底部 "unsafe" 区域）并赋予它黑色背景色。

Answer 4

您可以使用 Fragment 从渲染方法中 return 多个 SafeAreaView，每个单独指定它们的背景颜色：

render = () => (
  <Fragment>
    <SafeAreaView style={{ flex: 0.5, backgroundColor: "red" }} />
    <SafeAreaView style={{ flex: 0.5, backgroundColor: "blue" }} />
  </Fragment>
);

iPhone X 的结果：

Answer 5

我能够使用 Yoshiki 和 Zach Schneider 的答案的一个版本来解决这个问题。请注意您如何设置顶部 SafeAreaView 的 flex:0 使其不展开。

render() {
  return (
    <Fragment>
      <SafeAreaView style={{ flex:0, backgroundColor: 'red' }} />
      <SafeAreaView style={{ flex:1, backgroundColor: 'gray' }}>
        <View style={{ flex: 1, backgroundColor: 'white' }} />
      </SafeAreaView>
    </Fragment>
  );
}

Answer 6

我可以通过下面的代码实现这个，

<View style={{
    flex: 1
}}>
  <SafeAreaView style={{
    flex: 0,
    backgroundColor: 'red'
  }}>
  </SafeAreaView>
  <View style={{
      flex: 1,
      top: 0,
      backgroundColor: 'white'
   }}>
  </View></View>

感谢@Daniel M，受到他的回答启发。

Answer 7

解决方案：我运行遇到了这个问题，但我不明白你们为解决它所付出的努力。该应用程序位于一个占据所有屏幕的容器中。 SafeAreaView 会将应用程序包装到一个新的更小的容器中。所以将样式添加到主容器中，这样你就可以拥有你想要的背景。就这么简单:

<View style={{flex:1, backgroundColor: "black"}}>
  <SafeAreaView style={{flex:1, backgroundColor: "white"}}>
    <App />
  </SafeAreaView>
</View>

就这些了，希望对大家有所帮助;)

Answer 8

在 2022 年，我可以通过使用 SafeAreaView 的 edge prop 来解决这个问题！

<>
<SafeAreaView
   edges={["top"]}
   style={{ flex: 0, backgroundColor: "#0a2352" }}
/>
<SafeAreaView
   edges={["left", "right", "bottom"]}
   style={{
     flex: 1,
     backgroundColor: "#fff",
     position: "relative",
   }}
>
...
</SafeAreaView>
</>

Answer 9

<Fragment> 无法在任何 Android 设备上正常工作，所以为了解决这个问题，我尝试了这个解决方案，它在 android 和 ios 上都有效：

<SafeAreaView style={{ flex:1, backgroundColor: 'red' }}>
 <View style={{ flex: 1, backgroundColor: 'green' }} >
 <Text>Hello</Text>
 </View>
</SafeAreaView>

React Native SafeAreaView 背景颜色 - 如何为屏幕的顶部和底部分配两种不同的背景颜色？

React Native SafeAreaView background color - How to assign two different background color for top and bottom of the screen?

javascript

react-native

iphone-x