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来获取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否则false

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

1 个答案: