【问题标题】:React Native Issue: undefined is not an object (evaluationg 'this.props.navigator.push')React Native 问题:未定义不是一个对象(evaluationg 'this.props.navigator.push')
【发布时间】:2018-03-30 18:24:04
【问题描述】:

我是一个反应原生的新手,我正在尝试在屏幕之间导航......我遵循了一个简单的教程,不幸的是,当我按下“To Stats Page”TouchableHighlight 时,我收到错误:未定义不是对象(评估 'this .props.navigator.push')。附件是主屏幕和错误的屏幕截图(单击 TO STATS PAGE 时),下面是代码(我在我认为错误发生的位置添加了注释):

import React, { Component } from 'react';
import {AppRegistry,StyleSheet,TouchableHighlight,Navigator,Text,View} from 'react-native';

class Navi extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{ name: 'main' }}
        renderScene={this.renderScene.bind(this)}
      />
    );
  }
  renderScene(route, navigator) {
     if(route.name == 'main') {
       return <Main navigator={navigator}  />
     }
     if(route.name == 'stats') {
       return <Stats navigator={navigator} />
     }
  }
}

export default class Main extends Component {
  // THINK THE ERROR IS HERE
  navigate(routeName) {
    this.props.navigator.push({
      name: routeName
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Main
        </Text>
        <TouchableHighlight onPress={this.navigate.bind(this, "stats")}>
          <Text>TO STATS PAGE</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

class Stats extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Stats
        </Text>
        <TouchableHighlight onPress={()=>{this.props.navigator.pop()}}>
          <Text>BACK</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {marginTop:20,flex: 1,justifyContent: 'center',alignItems: 'center',
    backgroundColor: '#F5FCFF',},
  welcome: {fontSize: 20,textAlign: 'center',margin: 10,},
});

AppRegistry.registerComponent('navi', () => Navi);

Home Screen

Error when touching to stats page, using expo

【问题讨论】:

    标签: javascript react-native navigator


    【解决方案1】:

    伙计们,我认为这是最好的!!!修复是 Navi 应该导出而不是 main ...

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多