reactjs - 在 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>
  )
}

我明白了：

我试过这样做：

如何在 React Native 中设置 iOS 状态栏背景颜色？

但是没有用。

这是我的预期结果：

我可以使用headerStyleand headerTitleStylein来做到这一点，navigationOptions但是我不能使用自定义组件......

标签： reactjsreact-native

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

安卓