Как программно скрыть панель вкладок на Android в React Native с React Navigation? - PullRequest
Новая
       17

Как программно скрыть панель вкладок на Android в React Native с React Navigation?

0 голосов
/ 13 апреля 2019

Я использую приложение Create React Native с Expo для создания приложения.Мне нужно скрыть нижнюю панель вкладок в конкретном представлении при нажатии TextInput.Android по умолчанию открывает панель вкладок.

Я не хочу запускать панель вкладок, чтобы скрыть ее, потому что панель вкладок должна отображаться, когда клавиатура не отображается. 

"expo": "^31.0.2",
"react": "16.5.0",
"react-navigation": "^2.18.2"

У меня есть различные стеки, экспортированные как createBottomTabNavigator.

const SearchStack = createStackNavigator({
  Search: SearchScreen,
  Details: DetailsScreen,
  Tag: TagScreen,
  Category: CategoryScreen,
});

SearchStack.navigationOptions = {
  tabBarLabel: 'Søg',
  tabBarOptions: {
    activeTintColor: Colors.themeColor,
    showLabel: true,
  },
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-search' : 'md-search'}
    />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  InformationStack,
  SearchStack,
});

Я могу скрыть панель вкладок от навигатора, но я хочу иметь возможность делать это в определенном представлении с динамической навигациейОпции / состояние.Если я использую tabBarVisible: false в компоненте экрана, он не работает. 

export default class SearchScreen extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      text: '',
      showClearTextIcon: false,
    };
  }

  static navigationOptions = {
    header: null,
    title: 'Search',
  };

  /**
  * Lifecycle function.
  */
  componentDidMount() {
    this.load()
    this.props.navigation.addListener('willFocus', this.load)
  }

Есть ли у вас какие-либо идеи о том, как скрыть панель вкладок, когда клавиатура присутствует в Android или одним нажатием кнопки?

1 Ответ

0 голосов
/ 13 апреля 2019

На экране вы хотите, чтобы скрыть панель вкладок обновить опцию навигации. ключ позволяет animationEnabled принять значение true и скрыть tabBar с помощью свойства tabBarVisible. 

static navigationOptions = ({navigation}) => ({
  tabBarVisible: (navigation.state.params && navigation.state.params.hideTabBar) === true,
  animationEnabled: true
)}

Сделать TabBar видимым в componentWillMount: 

componentWillMount() {
    const setParamsAction = NavigationActions.setParams({
      params: {hideTabBar: true}
    });
    this.props.navigation.dispatch(setParamsAction);
}

А в componentWillUnmount снова скрыть панель вкладок: 

componentWillUnmount() {
    const setParamsAction = NavigationActions.setParams({
      params: {hideTabBar: false}
    });
    this.props.navigation.dispatch(setParamsAction);
}

Вы можете проверить this.state или this.props вашего экрана, чтобы решить, когда вы хотите, чтобы это произошло.

...