【问题标题】:React native ex-navigation changing routers反应本机前导航更改路由器
【发布时间】:2017-03-09 11:07:59
【问题描述】:

我在使用 react-native ex-navigation 切换页面时遇到问题: 错误:未定义不是对象(正在评估“this.props.navigator”

这是代码:

import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View, Navigator, Button } from 'react-native';
import {createRouter, NavigationProvider, StackNavigation, TabNavigation,TabNavigationItem as TabItem,}from '@exponent/ex-navigation';
import * as firebase from "firebase";

firebase.initializeApp(config);

import Login from 'auth/firstPage'
var Register = require('auth/register')
var Tab = require('./src/components/tab/mainTab');

const Router = createRouter(() => ({
  login: () => Login,
  register: () => Register,
  tab: () => Tab,
}));

export default class main extends Component {

  componentWillMount(){
    this.setState({ name:'login'});
  } 

  constructor(props) {
    super(props);
    this.state = {
      name: 'tab'
    };
  }

  render(){
    return(
     <NavigationProvider router={Router}>
       <StackNavigation initialRoute={Router.getRoute(this.state.name)} />
     </NavigationProvider>
   )
 }
}

这是我用来导航的代码:this.props.navigator.push({name:'register'})

【问题讨论】:

    标签: reactjs react-native ex-navigation


    【解决方案1】:

    您是否在新页面组件的另一个函数中调用了 this.props.navigator?

    您需要在新页面构造函数中添加以下内容,以便您可以访问 this.props.navigator:

    constructor(props){
      super(props);
      this.FUNCTION_CALL_NAV = this.FUNCTION_CALL_NAV.bind(this);
    }
    
    FUNCTION_CALL_NAV() {
      this.navigator.push({name: 'register'});
    }
    

    【讨论】:

    • 可以,但现在它给了我一个错误:Route is null or malformed.
    • 我建议您在根文件夹中创建一个名为 route.js 的单独文件,并将所有路由放入其中。然后在每个组件的顶部,每当你需要使用路由功能时,只需从 'route' 导入路由即可。
    猜你喜欢
    • 1970-01-01
    • 2018-03-21
    • 2016-04-10
    • 1970-01-01
    • 2020-10-27
    • 1970-01-01
    • 2021-12-11
    • 1970-01-01
    • 2021-03-29
    相关资源
    最近更新 更多