首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >导航器在“反应本机”中存在导航和容器道具错误。

导航器在“反应本机”中存在导航和容器道具错误。
EN

Stack Overflow用户
提问于 2019-08-23 18:43:11
回答 2查看 2.4K关注 0票数 2

非常重要的是:我的项目正在工作,当我将它们复制到备份文件夹并在删除文件后使用时,我得到了导航错误:

错误:这个导航器有导航和容器支持,所以不清楚它是否应该拥有自己的状态。删除道具:“主题”,如果导航者应该从导航支柱获得它的状态。如果导航器应该保持自己的状态,则不要传递导航支柱。

这是我的App.js代码:

代码语言:javascript
运行
复制
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调用Navigate.js:

代码语言:javascript
运行
复制
const AppNavigator = createStackNavigator({
  indexPage : Index,
  loginPage : Login,
  homePage : TabNavigator
},
{
  initialRouteName: "indexPage",
  headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
});

export default AppNavigator;

以及存在错误的index.js (error表示它位于第29行,它指的是第40行):

代码语言:javascript
运行
复制
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是对选项卡ui的一些定制

代码语言:javascript
运行
复制
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);
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-08-25 23:29:19

据我所见,您要在您的AppContainer文件中返回一个TabNavigator文件,对于所有的应用程序,您应该只有一个AppContainer。

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

代码语言:javascript
运行
复制
export default TabNavigator;
票数 2
EN

Stack Overflow用户

发布于 2019-08-26 14:42:51

我的决议如下

原件:

代码语言:javascript
运行
复制
export default createAppContainer( createBottomTabNavigator( {

修改:

代码语言:javascript
运行
复制
export default createBottomTabNavigator( {
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57631535

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档