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”屏幕中的状态栏。但它也隐藏了其他屏幕中的状态栏。

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

我的问题是，如何仅在CAMERA，ALBUMS屏幕上隐藏状态栏？

Answer 1

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

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 else false