我无法理解如何在react-native中实现导航。 根据{{3}}我已经安装了插件并集成了代码，但它不断给出错误
未定义不是对象（评估this.props.navigation.navigate）
以下是index.android.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Login from './src/pages/Login';
import Home from './src/pages/Home';
import { StackNavigator } from 'react-navigation';
export default class ECart extends Component {
render() {
return (
<App />
);
}
}
const App = StackNavigator({
Login:{screen:Login},
Home: {screen: Home}
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('ECart', () => ECart);
登录页面
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
TextInput,
Alert,
Button,
TouchableOpacity
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './Home';
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {};
this.onButtonPress=this.onButtonPress.bind(this);
}
onButtonPress= () => {
alert("ok");
const { navigate } = this.props.navigation;
navigate(Home);
};
render() {
return (
<View style={styles.container}>
<View style={{justifyContent: 'center',alignItems: 'center',height:250}}>
<Image style={{}} source={require('../img/ic_launcher.png')} />
</View>
<View style={styles.wrapper}>
<View style={styles.inputWrap}>
<View style={styles.iconWrap}>
<Image style={styles.icon} source={require('../img/icon/ic_email.png')}/>
</View>
<TextInput
style={styles.input}
placeholder="Username"
underlineColorAndroid="transparent"
placeholderTextColor="#939598"
/>
</View>
<View style={styles.inputWrap}>
<View style={styles.iconWrap}>
<Image style={styles.icon} source={require('../img/icon/ic_lock.png')}/>
</View>
<TextInput
style={styles.input}
placeholder="Password"
secureTextEntry
underlineColorAndroid="transparent"
placeholderTextColor="#939598"
/>
</View>
<TouchableOpacity
activeOpacity={0.5}
onPress={this.onButtonPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Login</Text>
</View>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5}>
<View style={styles.textWrap}>
<Text>Forgot Password.</Text><Text>Reset here</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.bottomTextWrap}>
<Text style={{}}> By clicking Sign In, you agree to our Terms and that you have read our Data Policy, including our Cookie Use.
</Text>
</View>
<View style={styles.bottomTextWrap}>
<Text> Copyright 2017 Suyati Technologies
</Text>
</View>
</View>
);
}
}
const styles= StyleSheet.create({
container:{
flex:1,
backgroundColor: '#FFFFFF'
},
inputWrap:{
flexDirection:"row",
marginVertical:10,
height:50,
borderWidth:1,
borderColor:'#939598',
backgroundColor:'transparent',
},
textWrap:{
flexDirection:"row",
backgroundColor:'transparent',
justifyContent:'center',
alignItems:'center',
marginVertical:10,
paddingHorizontal:20
},
bottomTextWrap:{
flex:1,
flexDirection:"row",
backgroundColor:'transparent',
justifyContent: 'center',
alignItems:'flex-end',
marginVertical:10
},
text:{
justifyContent:'center',
alignItems:'center'
},
input:{
flex:1,
paddingHorizontal:10,
backgroundColor:"transparent",
color:'#939598'
},
wrapper:{
paddingHorizontal:30
},
iconWrap :{
paddingHorizontal:7,
justifyContent:'center',
alignItems:'center',
borderColor:'#939598'
},
icon:{
width:20,
height:20
},
button:{
backgroundColor:'#13AFBC',
paddingVertical:10,
marginVertical:10,
justifyContent:'center',
alignItems:'center'
},
buttonText:{
color:'#FFFFFF',
fontSize:18
}
})
我试图导航到主屏幕。 我发现反应原生有点困难。 如果有人能指引我朝着正确的方向前进，那将非常有帮助，因为我坚持并且需要一种新的方法。
编辑 - 我更改了代码，但它仍然无法导航。我收到警报，但它仍保留在登录页面
谢谢！
答案 0 :(得分：4)
似乎你有来自不同来源（也许是教程）的复制粘贴代码，并希望它能够正常工作，但通常它不会。在您的代码中，您有几个错误。
首先，在index.android.js文件中，您有ECart个组件，该组件将传递给AppRegistry.registerComponent()函数。因此，该组件是您应用程序的起点。您还有App变量，它实际上也是一个组件，但您从不使用它。所以现在，你的应用程序不使用react-navigation，因为它无论如何都不包括在内。为了使用导航库，您必须在某种程度上将其传递给app注册表。例如像这样
const App = StackNavigator({
Login: {screen: Login},
Home: {screen: Home},
});
export default class ECart extends Component {
render() {
return (
<App />
);
}
}
这样，Ecart传递给AppRegistry，它有App（导航组件），它将处理导航。由于App负责导航，因此您应该声明导航组件的“路线”和相应组件，就像上面包含Login Screen一样。由于Login是StackNavigator声明中的第一个，因此在加载应用时它将是第一个屏幕。
现在，您通过StackNavigator传递的每个组件都会有navigation道具，并通过react-navigation传递。使用该道具，您可以导航到应用中的其他屏幕。因此，由于您的代码Login组件未传递给StackNavigator，this.props.navigation将为undefined。当你试图访问this.props.navigation.navigate时，它会抛出一个错误，它说，undefined不是一个对象。这解释了你的主要错误，但这不仅是你粘贴的代码中的错误。
在Login组件中，您有
onButtonPress= () => {
navigate(Home, { name: 'Jane' });
};
调用navigate函数，但它没有被声明为anyware。因此，当您解决第一个错误时，按下按钮Undefined is not a function时会看到另一个错误。所以，要解决这个问题，你必须做两件事。首先，声明导航功能，第二个绑定onButtonPress方法。
onButtonPress() {
const { navigate } = this.props.navigation;
navigate('Home', { name: 'Jane' });
};
并绑定此方法，如
constructor(props) {
super(props);
this.state = {};
this.onButtonPress=this.onButtonPress.bind(this);
}
如果你在想，到底有什么约束力，请看一下这个video