在 React Native 中更改 iOS 和 Android 上的状态栏颜色

Question

我在使用 React Native 时遇到了一些问题。我有一个需要自定义标题的屏幕（带有图标和更多内容），所以在navigationOptions 中我将使用headerTitle 而不是title。

问题是，当使用headerTitle 时，组件中不包含状态栏。所以我有这样的事情：

headerTitle: () => <MyHeader />

然后：

const MyHeader = props => {
  return(
    <View style={{flex: 1, backgroundColor: 'red', height: '100%', padding: 10, justifyContent: 'center'}}>
      <Text style={{color: 'white'}}>Testing</Text>
    </View>
  )
}

我明白了：

我试过这样做：

How to set iOS status bar background color in React Native?

但是没有用。

这是我想要的结果：

我可以在navigationOptions 中使用headerStyle 和headerTitleStyle 来做到这一点，但是我不能使用自定义组件...

Answer 1

你可以使用headerStyle

const MyHeader = props => {
  return(
    <View style={{flex: 1, backgroundColor: 'red', height: '100%', padding: 10, justifyContent: 'center'}}>
      <Text style={{color: 'white'}}>Testing</Text>
    </View>
  )
}

static navigationOptions = {
    headerTitle: () => <MyHeader />,
    headerStyle: {
      backgroundColor: 'red',
    }
  };

IOS

安卓

Answer 2

简单。使用 StatusBarIOS 组件。