React native - 仅在特定屏幕上隐藏状态栏

Question

我正在使用标签导航上传如下图片

const Photos = TabNavigator({
    CAMERA: {
            screen: TakeCamera,
        navigationOptions: {
          tabBarIcon: ({focused}) => (
            <View style={{flexDirection: 'row'}}>
              <Text style={{textAlign: 'center', color: focused? '#C7A985' : '#020202'}}>CAMERA</Text>
              <Icon name="chevron-down" size={15} color= {focused? '#C7A985' : '#ffffff'}/>
            </View>
          )
        },
        },
      ALBUMS: {
            screen: Albums,
        navigationOptions: {
          tabBarIcon: ({focused}) => (
            <View style={{flexDirection: 'row'}}>
              <Text style={{textAlign: 'center', color: focused? '#C7A985' : '#020202'}}>ALBUMS</Text>
              <Icon name="chevron-down" size={15} color= {focused? '#C7A985' : '#ffffff'}/>
            </View>
          )
        },
        },
    {
      tabBarOptions: {
        upperCaseLabel: false,
        showIcon: true,
        showLabel: false,
        style: {
          backgroundColor: '#F7F1ED',
          borderTopWidth: 1
        }
      },
        //initialRouteName: 'Feed',
      tabBarComponent: TabBarBottom,
      tabBarPosition: 'bottom',
      animationEnabled: false,
      swipeEnabled: false,
    });

export default class UploadPost extends Component {
  static navigationOptions = ({ navigation }) => ({
    header: null,
    tabBarVisible: false
  });

  render() {
    return (
      <View style={{flex: 1}}>
        <StatusBar hidden={true}/>
        <Photos screenProps={{navigation: this.props.navigation}}/>
      </View>
    );
  }
}

此处 <Statusbar hidden={true}> 按预期隐藏了 "CAMERA"、"ALBUMS" 屏幕中的状态栏。但是它也隐藏了其他屏幕的状态栏。

当我打开应用程序时，我可以看到状态栏
在我打开 CAMERA 或 ALBUMS 屏幕后，所有其他屏幕的状态栏将永久隐藏。

我的问题是，如何只在相机、相册屏幕上隐藏状态栏？

Answer 1

您可以使用文档中提到的 Screen Tracking Middleware 来获取 currentScreen

的活动 routeName

function getActiveRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  // dive into nested navigators
  if (route.routes) {
    return getActiveRouteName(route);
  }
  return route.routeName;
}

如果 routeName 与您不想显示 StatusBar 的所需屏幕匹配，则将其设置为 true 否则 false

React native - 仅在特定屏幕上隐藏状态栏

React native - Hide status bar only on specific screens

react-native

react-native-navigation