react-native - 如何使用透明状态栏获得全屏背景？

Question

我想全屏显示 react-native-maps。但是 StackNavigator 的标题（反应原生导航）应该显示在地图上。状态栏也是。我想在地图上添加一个小渐变，以使状态栏和后退按钮（可能还有右侧标题侧的更多按钮）更具可读性。

目前使用 StackNavigator 会自动将“全屏”地图 (flex: 1) 限制在导航标题的底部。

如何解决这个问题？

反应原生：0.46

反应导航：1.0.0-beta.11

Answer 1

对于那些想要解决这个问题的人，只需将以下内容添加到您的屏幕组件中：

static navigationOptions = {
    headerStyle: {
      position: 'absolute',
      top: 0,
      left: 0
    },
    headerBackTitleStyle: {
        opacity: 0,
    },
    headerTintColor: '#fff'
};

并添加一些LinearGradients（如果你愿意），你有这样的东西：

Answer 2

只需使用 React-Native StatusBar API

<View style={styles.container}>
    <StatusBar backgroundColor={Color.TRANSPARENT} translucent={true} />
    <MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={styles.map}
      region={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      }}
    />
  </View>