Le navigateur a à la fois des erreurs de props de navigation et de conteneur dans React Native

Question

Très important : mon projet fonctionnait, mais quand je les ai copiés dans mon dossier de sauvegarde et utilisés après avoir supprimé des fichiers !!, j'ai obtenu une erreur de navigation :

Erreur : Ce navigateur possède à la fois des props de navigation et de conteneur, il n'est donc pas clair s'il doit posséder son propre état. Supprimez les props : "theme" si le navigateur doit obtenir son état à partir de la prop de navigation. Si le navigateur doit gérer son propre état, ne transmettez pas de prop de navigation.

Voici les codes de mon App.js :

import { createAppContainer } from "react-navigation"
import AppNavigator from './app/Navi/Navigate'

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render() {
    return 
  }
}

Où j'appelle AppNavigator depuis Navigate.js :

const AppNavigator = createStackNavigator({
  indexPage : Index,
  loginPage : Login,
  homePage : TabNavigator
},
{
  initialRouteName: "indexPage",
  headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
});

export default AppNavigator;

et index.js où l'erreur est là (l'erreur dit qu'elle se trouve à la ligne 29 qui fait référence à la ligne 40) :

export default class Index extends React.Component{
 componentDidMount(){
        this.checker();
    }

    transfer = (page) => {
        if(page == 'Home')
            this.props.navigation.navigate('homePage');
        else
            this.props.navigation.navigate('loginPage');
    }

    checker = () => {
        AsyncStorage.getItem('LoginBoolean')
        .then((value) => {
            if(value == 'yes')
                this.transfer('Home');
            else
                this.transfer('Login');
        })
        .catch((error) => 
            console.log(error)
        );
    }

    render(){
        some rendering tags!
    }
}

et aucune idée de ce qui se passe !

Modifié les codes du TabNavigator complètement :

ce const rednderNav et customTabs sont des personnalisations pour l'interface utilisateur d'onglet

import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

import Home from '../Home/home'
import LogOut from '../Logging/logout'
import Search from '../Route/Search'
import Poll from '../Poll/Poll'
import Signate from '../sign/signate'

const renderNav = (name, tintColor) => (

  )

const customTabs = ({ navigation }) => ({
    tabBarIcon: ({tintColor }) => {
      const { routeName } = navigation.state;
      if (routeName === 'LogOut') {
        return renderNav('md-log-out', tintColor);
      } else if (routeName === 'Home') {
        return renderNav('md-planet', tintColor);
      } else if (routeName === 'Route') {
        return renderNav('md-compass', tintColor);
      } else if (routeName === 'Poll') {
        return renderNav('ios-checkmark-circle', tintColor);
      } else if (routeName === 'Sign') {
        return renderNav('hand', tintColor);
      }
    }
  });

const TabNavigator = createBottomTabNavigator({
    LogOut : LogOut,
    Route : Search,
    Home : Home,
    Poll : Poll,
    Sign : Signate
},
{
    defaultNavigationOptions: customTabs,
  animationEnabled: true,
  swipeEnabled: true,
  tabBarPosition: 'bottom',
  initialRouteName: 'Poll',
  tabBarOptions: {
    showLabel: false,
    activeTintColor: 'yellow',
    inactiveTintColor: '#fff',
    style:{
      borderTopColor: '#ccc',
      borderTopWidth: 3,
      backgroundColor:'#191919',
      height: 50,
    },
    activeTabStyle: {
      backgroundColor: 'white',
      borderBottomWidth: 40,
      borderColor: '#6C1D7C'
    }
  },
});

export default createAppContainer(TabNavigator);

Answer 1

À en juger par ce que je vois, vous retournez un AppContainer dans votre fichier TabNavigator, vous ne devriez avoir qu'un seul AppContainer pour toute l'application.

La meilleure solution serait donc de retourner directement le TabNavigator.

export default TabNavigator;

Answer 2

J'ai résolu comme suit

original :

export default createAppContainer( createBottomTabNavigator( {

modifié :

export default createBottomTabNavigator( {