reactjs - safeareaview 底部填充的自定义颜色/内容

Question

我正在使用 react-navigation在 react-native app . react-navigation确实有预建 SafeAreaView .但是，我对 SafeAreaView 的底部填充有非常具体的设计。如下:

1)自定义SafeAreaView的颜色，即我需要在红框中指定一个自定义的底部padding的单色。指定的自定义单色可能与顶部填充颜色相同/可能不同，并且从一个屏幕到另一个屏幕会有所不同。所以我需要能够明确说明这个屏幕需要这个特定的颜色。

例如:<SafeAreaView bottomPaddingColor={'green'}></SafeAreaView>


2) 自定义设计内容(例如:我需要 2 种颜色)。示例之一是页面上的页脚是 2 种差异颜色的按钮，每个按钮的宽度为 50%。该设计特别需要底部填充遵循按钮颜色，如图所示。

例如:<SafeAreaView bottomPaddingColor={'green,red'}></SafeAreaView>它自动将颜色等宽分割。

或者无论如何自定义bottomPadding组件，我可以在其中包含以下组件作为底部填充。

<View style={{flexDirection: 'row', height: '100%'}}>
    <View style={{flex: 1, height: '100%', backgroundColor: 'red'}}></View>
    <View style={{flex: 1, height: '100%', backgroundColor: 'green'}}></View>
</View>

例如:



我已阅读 SafeAreaView文档由 react-native 提供和 react-navigation但没有发现这种定制可用。

Answer 1

为此，您可以渲染多个 SafeAreaViews ，以下应该实现你所追求的:

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <SafeAreaView style={{ flex: 1 }}>
            <View style={{ flex: 1 }}>
              <Text>Content Goes here</Text>
            </View>
          </SafeAreaView>
        </View>
        <View style={{ flexDirection: 'row', flex: 0 }}>
          <SafeAreaView style={{ flex: 1, backgroundColor: 'red' }} />
          <SafeAreaView style={{ flex: 1, backgroundColor: 'green' }} />
        </View>
      </View>
    );
  }
}