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

Question

我正在使用react-navigation中的react-native app。 react-navigation确实已预先构建了SafeAreaView。但是，我对SafeAreaView的底部填充有非常具体的设计，如下所示：

1）自定义SafeAreaView的颜色，即，我需要在红色框中指定底部填充的自定义单色。指定的自定义单色可能与/可能与顶部填充颜色不同，并且在一个屏幕之间变化。因此，我需要能够明确指出该屏幕需要这种特定的颜色。

例如：<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>
    );
  }
}