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

Question

我使用了React Native 0.50.1中的SafeAreaView，除了一部分外，它的工作效果还算不错。我将橙色背景颜色分配给SafrAreaView，但无法确定将底部不安全区域背景更改为黑色。

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望有橙色的顶部和黑色的底部。

但下面是我现在得到的。

Answer 1

我能够使用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 2

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

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 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在顶部应用橙色背景颜色。第一个<SafeAreaView />将第二个推下来，以便它在＆＃34;安全区域的开头＃34; （在状态栏下方）。然后第二个SafeAreaView占据屏幕的其余部分（包括底部＆＃34;不安全＆＃34;区域），并为其提供黑色背景颜色。

Answer 4

您可以使用SafeAreaView从呈现方法中返回多个Fragment，每个独立指定其backgroundColor：

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

iPhone X上的结果：

Answer 5

我能够通过下面的代码实现这一目标，

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

感谢@Daniel M，他的回答启发了我们。

Answer 6

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

我的解决方案是将标签栏组件包装在具有正确背景颜色的SafeAreaView中，同时将导航栏组件包裹在其自身的SafeAreaView及其背景颜色中。

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

导航栏

这是Tab Bar：

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

那就是说，您可以将导航组件包装在样式为橙色的SafeAreaView中，并将主要内容包装在另一个SafeAreaView中，并将黑色作为backgroundColor样式，或者你所选择的颜色。

如果您在同一组件中添加两个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是因为我们有时会隐藏导航和标签栏