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. 當我打開應用程序時，我可以看到StatusBar
2. 打開CAMERA或ALBUMS屏幕后，StatusBar將永久隱藏在所有其他屏幕上。

我的問題是，如何僅在CAMERA，ALBUMS屏幕上隱藏狀態欄？

Answer 1

您可以使用文檔中提到的屏幕跟蹤中間件來獲取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