用于反应导航的Homescreen（App.js）结构

Question

我正在尝试实现react-navigation包，以便将一个屏幕链接到另一个。 我收到一个错误“undefined不是一个对象（评估'_this2.props.navigation.navigate'） - React Native”

我很确定这个错误是因为我在项目的App.js部分没有任何内容。

我有一个名为screen.js的文件，它有两个类（每个屏幕一个），以及一个调用this.props.navigator来更改屏幕的onpress函数。

Screen.js

 import React, { Component } from 'react'; import { StyleSheet, Text, TextInput, View, TouchableHighlight, PanResponder, AppRegistry, Image, Alert, } from 'react-native'; import { Card, Button, Icon } from 'react-native-elements'; import { createStackNavigator, createAppContainer } from 'react-navigation'; import { Constants, MapView } from 'expo'; class HomeScreen extends Component { static navigationOptions = { title: 'Home', }; constructor() { super(); this.state = {...}; } _handleButtonPress = () => { Alert.alert('Button pressed!', 'You did it!'); }; componentWillMount() { this.panResponderRef = PanResponder.create({ onStartShouldSetPanResponder: () => true, onMoveShouldSetPanResponder: () => true, onPanResponderGrant: this.doNothing, onPanResponderMove: this._handlePanResponderMove, onPanResponderRelease: this._handlePanResponderEnd, onPanResponderTerminate: this.doNothing, }); } //onPanResponderRelease and onPanResponderTerminate Handler _handlePanResponderEnd = (event, gestureState) => { const { navigate } = this.props.navigation; let tIndex = this.state.index; if (this.state.dy > 100) navigate('Second', { index: tIndex, getFunc: this.getName.bind(this) }); else if (this.state.dx > 150) this.setState({ index: tIndex + 1 }); else if (this.state.dx < -150 && tIndex > 0) this.setState({ index: tIndex - 1 }); }; render() { const { navigate } = this.props.navigation; return ( <View style={styles.container}> <TouchableHighlight style={styles.TouchableHighlight} onPress={() => this.props.navigator.push({id:'SecondScreen'})}> <View style={styles.author}> <Text style={styles.author}>Shelter 1</Text> </View> </TouchableHighlight> </View> ); } } class SecondScreen extends React.Component { static navigationOptions = { title: 'Second', }; constructor(props) { super(props); this.state = { index: this.props.navigation.state.params.index, getFunc: this.props.navigation.state.params.getFunc, name: 'not set' }; } componentWillMount() { let tName = this.state.getFunc(this.state.index); this.setState({ name: tName }); } render() { const { navigate } = this.props.navigation; return ( <View style={styles.container}> </View> <Button title="Go to Home page" onPress={() => navigate('Home')} /> </View> ); } } const NavigationApp = createStackNavigator({ Home: { screen: HomeScreen }, Second: { screen: SecondScreen }, }); export default createAppContainer(NavigationApp); }); 

App.js

 import NavApp from "screen"; export default NavApp; 

我收到一个错误“undefined不是一个对象（评估'_this2.props.navigator.push'）”

Answer 1

你可以试试这个

this.props.navigation.push('SecondScreen')