React Native改变状态栏颜色

Question

我在IOS上改变我的RN应用程序状态栏颜色时遇到了一些麻烦。我所做的就是按照文档的要求，输入

<ScreenWrapper flex={1}>
<StatusBar backgroundColor="#1d78ef" barStyle="light-content" />
<ScrollView>
...content
</ScrollView>
</ScreenWrapper>

但是，正如文档所说，它不能在IOS上工作。有什么已知的变通办法吗?

Answer 1

我为此创建了一个组件。你可以在Android和iOS上使用不同的代码，如下所示。我用的是SafeAreaView，但如果你愿意，你可以只用View。

class SafeAreaWithStatusBarView extends Component {
renderAndroid() {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: this.props.backgroundColor }}>
<StatusBar backgroundColor={this.props.statusBarColor} barStyle={this.props.barStyle} />
{this.props.children}
</SafeAreaView>
);
}
renderIOS() {
return (
<React.Fragment>
<SafeAreaView style={{ flex: 0, backgroundColor: this.props.statusBarColor }} />
<SafeAreaView style={{ flex: 1, backgroundColor: this.props.backgroundColor }}>
<StatusBar barStyle={this.props.barStyle} />
{this.props.children}
</SafeAreaView>
</React.Fragment>
);
}
render() {
return Platform.OS === 'ios' ? this.renderIOS() : this.renderAndroid();
}
}