我使用的设置与F8开源应用程序非常相似,我在其中有一个根组件,用于显示应用程序:
render() {
return (
<View style={commonStyles.container}>
<StatusBar
backgroundColor="rgb(122,77,246)"
barStyle="light-content"
/>
<AppNavigator
ref={nav => { this.navigator = nav; }}
navigation={addNavigationHelpers({
dispatch: this.props.dispatch,
state: this.props.nav,
})} />
<PushNotificationController />
</View>
)
}
StatusBar直接从React-Native导入,AppNavigator是一个简单的StackNavigator const。
我看到的问题是随机出现的问题(虽然通常当应用程序加载速度特别慢或从背景中重新启动时)状态栏颜色消失,ToolbarAndroid向下移动。
没有问题:
问题:
我使用以下方法定义工具栏,也来自F8 app。
class HeaderAndroid extends Component {
render() {
const { leftItem, title, rightItem } = this.props;
return (
<View style={styles.toolbarContainer}>
<ToolbarAndroid
navIcon={leftItem && leftItem.icon}
onIconClicked={leftItem && leftItem.onPress}
titleColor='white'
backgroundColor="rgb(122,77,246)"
actions={this.props.actions}
style={styles.toolbar}
onActionSelected={this.props.onActionClicked()}
title={title} />
</View>
)
}
}
var STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : 24;
var HEADER_HEIGHT = Platform.OS === 'ios' ? 44 + STATUS_BAR_HEIGHT : 56 + STATUS_BAR_HEIGHT;
var styles = StyleSheet.create({
toolbarContainer: {
paddingTop: STATUS_BAR_HEIGHT,
},
toolbar: {
height: HEADER_HEIGHT - STATUS_BAR_HEIGHT,
},
}
我认为这个问题与我定义工具栏顶部填充的方式有关,但它与F8完全相同,我发现该应用没有任何问题。
如果有人在此之前遇到过这个问题并修复它,我会非常乐意帮助。