React native — скрыть строку состояния только на определенных экранах

Я использую навигацию по вкладкам для загрузки изображений, как показано ниже.

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}> скрывает строку состояния на экранах «КАМЕРА», «АЛЬБОМЫ», как и ожидалось. Но он также скрывает строку состояния на других экранах.

  1. Когда я открываю приложение, я вижу строку состояния.
  2. После того, как я открываю экраны КАМЕРА или АЛЬБОМЫ, панель состояния навсегда скрывается для всех других экранов.

Мой вопрос: как скрыть строку состояния только на экранах КАМЕРА, АЛЬБОМЫ?


react-native react-native-navigation
person Inaccessible    schedule 01.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать промежуточное ПО для отслеживания экрана, как уже упоминалось. в документах, чтобы получить активный 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

person Pritish Vaidya    schedule 01.09.2018
comment
Привет, спасибо за ответ. Куда мне нужно добавить вышеуказанную функцию? В app.js или внутри index.js? - person Inaccessible; 01.09.2018
comment
Вы можете добавить его на тот же экран, где вы определяете навигатор и передаете currentRoute, который затем можно обновить, чтобы проверить, является ли он желаемым маршрутом или нет, проверьте ссылка для получения дополнительной информации. - person Pritish Vaidya; 01.09.2018