反应本机：有办法在android中将颜色更改为按钮“安全区域”吗？

Question

有没有办法在Android中将颜色更改为按钮“安全区域”？ 我该怎么做 ？ 这是我尝试更改SafeAreaView颜色的代码示例 底部的android。 我不明白我的错误在哪里，所以请让我了解错误之处 以我的方式 。 在我的主应用程序屏幕上的此示例中，我尝试将所有内容包装在SafeAreaView中 但这不起作用。

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      azureLoginObject: {},
      loginSuccess: false
    };
    this.azureInstance = new AzureInstance(credentials);
    this._onLoginSuccess = this._onLoginSuccess.bind(this);
  }

  componentDidMount = async () => {
    await hydrate();
  };

  _onLoginSuccess() {
    this.azureInstance
      .getUserInfo()
      .then(result => {
        this.setState({
          loginSuccess: true,
          azureLoginObject: result
        });
        console.log(result);
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {

    if (!this.state.loginSuccess) {
      return (
        <SafeAreaView style={styles.safe}>
        <Provider store={InfoStore} {...stores}>
          <>
            <AzureLoginView
              azureInstance={this.azureInstance}
              loadingMessage={
                <Text style={{ fontSize: 20, fontWeight: "bold" }}>
                  waiting...
                </Text>
              }
              onSuccess={this._onLoginSuccess}
            />
            <View style={styles.appBottomMainContainer}>
              <View style={styles.appBottomView}>
                <Text style={{ fontWeight: "bold" }}>
                  banana
                </Text>
              </View>
            </View>
          </>
        </Provider>
        </SafeAreaView>

      );
    }

    const { userPrincipalName, givenName } = this.state.azureLoginObject;
    // console.log("my name is ====", givenName)
    return (

      (

          <Provider store={InfoStore}>
            <PlacesNavigator />
          </Provider>

      ),
      (<Modal />)

    );
  }
}
const styles = StyleSheet.create({
safe: {
    flex: 0,
    backgroundColor: "red"
 }
});