自定义安全区域视图底部填充的颜色/内容答案

【问题标题】：Custom color/content of safeareaview bottom padding自定义安全区域视图底部填充的颜色/内容
【发布时间】：2020-01-19 11:13:24
【问题描述】：

我在react-native app 中使用react-navigation。 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>

例如：

我已阅读react-native 和react-navigation 提供的SafeAreaView 文档，但没有发现此类自定义可用。

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案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>
    );
  }
}

【讨论】：

【解决方案2】：

使用 Android 上的 React Navigation v6 (Expo v44)，除了使用 app.json 中的顶级 androidNavigationBar 选项之外，似乎没有其他方法可以更改该区域的颜色：

"androidNavigationBar": {
  "backgroundColor": "#000000"
}

如果你想动态改变颜色，你可以使用 NavigationBar.setBackgroundColorAsync()。使用expo install expo-navigation-bar 安装模块，然后在您的组件中：

import * as NavigationBar from "expo-navigation-bar";

// ...

NavigationBar.setBackgroundColorAsync("#000000");

很抱歉劫持了这个帖子，但这是我发现的问题的最佳描述，我浪费了半个小时来寻找解决方案。希望它可以帮助下一个不幸的开发者:)

【讨论】：