navigator 在 React Native 中同时出现导航和容器道具错误答案

【问题标题】：navigator has both navigation and container props error in React Nativenavigator 在 React Native 中同时出现导航和容器道具错误
【发布时间】：2019-12-29 02:07:16
【问题描述】：

非常重要：我的项目正在运行，当我将它们复制到我的备份文件夹并在删除文件后使用时，我遇到了导航错误：

错误：这个导航器有导航和容器属性，所以不清楚它是否应该拥有自己的状态。如果导航器应该从导航道具中获取其状态，则删除道具：“主题”。如果导航器应该保持自己的状态，请不要传递导航属性。

这是我的 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 <AppContainer />
  }
}

我从 Navigate.js 调用 AppNavigator：

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

export default AppNavigator;

和 index.js 哪里有错误（错误说它在第 29 行，指的是第 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!
    }
}

不知道发生了什么！

已编辑 TabNavigator 完全编码：

const rednderNav 和 customTabs 是 tab ui 的一些自定义

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) => (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Icon name={name} size={15} style={{color: tintColor}} />
    </View>
  )

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

【问题讨论】：

那么对于您的情况， "LoginBoolean" 的值是多少？我们能看到 TabNavigator 里面有什么吗？
我添加了 tabnavigator 代码。和 LoginBoolean 得到这些值：'yes' 和 'no'（实际上不是布尔值！）

标签： javascript reactjs react-native

【解决方案1】：

据我所知，您在 TabNavigator 文件中返回了一个 AppContainer，您应该只有一个 AppContainer 用于所有应用程序。

所以最好的办法是直接返回 Tabnavigator

export default TabNavigator;

【讨论】：

【解决方案2】：

我解决如下

原文：

export default createAppContainer( createBottomTabNavigator( {

修改：

export default createBottomTabNavigator( {

【讨论】：