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

Question

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

目前使用StackNavigator自动将“全屏”地图（flex：1）限制在导航标题的底部。

如何解决这个问题？

反应原生：0.46

react-navigation：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>