2
votes

Comment masquer la barre d'onglets par programme sur Android dans React Native avec React Navigation?

J'utilise Create React Native App avec Expo pour créer une application. J'ai besoin de masquer la barre d'onglets inférieure dans une vue spécifique lorsqu'un TextInput est enfoncé. Android pousse la barre d'onglets par défaut.

Je ne veux pas déclencher le masquage de la barre d'onglets car la barre d'onglets doit être dans la vue lorsque le clavier n'est pas affiché.

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)
  }

J'ai plusieurs piles exportées en tant que a 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,
});

Je peux masquer la barre d'onglets du navigateur mais je veux pouvoir le faire dans la vue spécifique avec une navigationOptions / état dynamique. Si j'utilise tabBarVisible: false dans le composant écran, cela ne fonctionne pas.

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

Avez-vous des idées sur la façon de masquer la barre d'onglets lorsque le clavier est présent sur Android ou avec le clic sur un bouton?

javascript reactjs react-native react-navigation react-native-android

0 commentaires

4 Réponses :

0
votes

Dans l'écran que vous souhaitez masquer la barre d'onglets, mettez à jour l'option de navigation. la clé active animationEnabled sur true et masque le tabBar en utilisant la propriété tabBarVisible .

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

Créer tabBar visible dans componentWillMount:

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

Et dans componentWillUnmount masquer à nouveau le tabBar:

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

0 commentaires

0
votes

Créez un tabBarComponent séparé qui écoutera et répondra à certains événements. Dans mon cas, c'est le clavier qui affiche des événements comme celui-ci:

 tabBarComponent: props => <TabBarComponent />,
 tabBarPosition: 'bottom'

Ensuite, ajoutez ce composant dans votre option de navigation tabBarComponent dans le navigateur de votre application.

    import React from 'react';
    import {TabBarBottom} from react-navigation;
    import {Keyboard, Platform} from 'react-native';


    Class TabBarComponent extends React.Component {
      constructor() {
         super();
         this.state = {
             visible: true
          }
       }

     componentDidMount() {
        if (Platform.OS === 'ios') {
          this.keyboardEventListeners = [
            Keyboard.addListener('keyboardDidShow', this.visible(false)),
            Keyboard.addListener('keyboardDidHide', this.visible(true))
          ];
        }
      }
      componentWillUnmount() {
        this.keyboardEventListeners.forEach((eventListener) => eventListener.remove());
      }
      visible = visible => () => this.setState({visible});
      render() {
        if (!this.state.visible) return null
        else {return <TabBarBottom {...props}/>}
       }
    }

0 commentaires

0
votes

Parfois, régler android: windowSoftInputMode sur AdjustPan ou adjustResize n'est pas une idée idéale car cela affecte toute l'application.

c'est donc mon idée pour résoudre cette erreur.

React Navigation 5

BottomTabBar.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const bottomTabNavigator = createBottomTabNavigator();

<BottomNavigator
    screenOptions={bottomTabScreenOptions}
    tabBarOptions={bottomTabBarOptions}
    tabBar={props => <CustomBottomTabBar {...props} />}
>
    ......
</BottomNavigator>

AppNavigator.js

import React, { useEffect, useState } from 'react';
import { Platform, Keyboard } from 'react-native';
import { BottomTabBar } from '@react-navigation/bottom-tabs';

const CustomBottomTabBar = props => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    let keyboardEventListeners;
    if (Platform.OS === 'android') {
      keyboardEventListeners = [
        Keyboard.addListener('keyboardDidShow', () => setVisible(false)),
        Keyboard.addListener('keyboardDidHide', () => setVisible(true)),
      ];
    }
    return () => {
      if (Platform.OS === 'android') {
        keyboardEventListeners &&
          keyboardEventListeners.forEach(eventListener => eventListener.remove());
      }
    };
  }, []);

  const render = () => {
    if (Platform.OS === 'ios') {
      return <BottomTabBar {...props} />;
    }
    if (!visible) return null;
    return <BottomTabBar {...props} />;
  };

  return render();
};

export default CustomBottomTabBar;

0 commentaires

0
votes

Remplacez une ligne de code dans android \ app \ src \ main \ AndroidManifest.xml dans le projet. Cela masquera TabBar chaque fois que vous ouvrirez le clavier.

  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        
     **Just change your windowSoftInputMode value to "adjustPan"**

    android:windowSoftInputMode="adjustPan"> 

    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
`

0 commentaires