反应原生android工具栏向下移动和状态栏失去颜色

时间:2017-08-19 03:32:03

标签: android react-native toolbar statusbar

我使用的设置与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向下移动。

没有问题:

Before the problem

问题:

After bringing app from background and it restarts

我使用以下方法定义工具栏,也来自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完全相同,我发现该应用没有任何问题。

如果有人在此之前遇到过这个问题并修复它,我会非常乐意帮助。

0 个答案:

没有答案