问题描述
我无法理解如何在react-native中实现导航.根据 doc ，我已经安装了插件并集成了代码，但是它一直在给出错误
I'm not able to understand how to implement navigation in react-native.as per the doc i have installed the plugin and integrated the code but it keeps giving the error
未定义不是对象(正在评估this.props.navigation.navigate)
下面是index.android.js
Below is the 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
}
})
我正在尝试导航到主屏幕.我发现本机反应有点困难.如果有人可以引导我朝着正确的方向发展，那将非常有帮助，因为我会坚持下去，并且需要一种新的方法.
I'm trying to navigate to the home screen.I'm finding react-native a bit difficult.If anyone could guide me in the right direction it will be very helpful as i'm stuck at it and need a new approach.
编辑-我更改了代码，但仍然无法导航.我收到警报，但仍停留在登录页面上
EDIT-I changed the code but still it wont navigate.I get the alert but it stays on the loginpage
谢谢！
推荐答案
似乎您已经从不同来源(也许是教程)复制粘贴了代码，并希望它能工作，但通常不会.在您的代码中，您有几个错误.
It seems that you have copy-pasted code from different sources(maybe tutorials) and hope it will work, but usually it doesn't. In your code you have several mistakes.
首先，在index.android.js文件中具有ECart组件，该组件传递给AppRegistry.registerComponent()函数.因此，此组件是您应用程序的起点.您还具有App变量，它实际上也是一个组件，但是您从未使用过它.所以现在，您的应用程序不使用反应导航，因为它无论如何都没有包含在内.为了使用导航库，您必须在某种程度上将其传递给应用程序注册表.例如这样的
First of all, in index.android.js file you have ECart component, which is passed to AppRegistry.registerComponent() function. So, this component is a starting point for you application. You also have App variable, which is actually also a component, but you never use it. So now, your app doesn't use react-navigation, as it is not included anyhow. In order to use navigation library, you have to pass it to the app registry on some level. For example like this
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声明中位于第一个位置，因此在加载应用程序时它将是第一个屏幕.
This way, Ecart is passed to AppRegistry, and it has App (navigation component), which will handle navigations. Because App is responsible for navigation, you should declare your 'routes' and corresponding components that navigation component, like i included Login Screen above. Because Login is first in your StackNavigator declaration, it will be first screen when app is loaded.
现在，您通过StackNavigator传递的每个组件都将具有navigation道具，并通过react-navigation进行传递.使用该道具，您可以导航到应用程序中的其他屏幕.因此，由于您的代码Login组件未传递给StackNavigator，因此this.props.navigation将为undefined.当您尝试访问this.props.navigation.navigate时，它将引发错误，并指出未定义不是对象.这说明了您的主要错误，不仅是粘贴在此处的代码中的错误.
Now, every compononent that you passed through StackNavigator will have navigation prop, passed by react-navigation. With that prop, you can navigate to other screens in your app. So, because you in your code Login component is not passed to StackNavigator, this.props.navigation will be undefined. And when you try to access this.props.navigation.navigate, it will throw an error, where it says, that undefined is not an object.This explains your main error, but it is not only error in the code you paste here.
在Login组件中，您拥有
onButtonPress= () => {
navigate(Home, { name: 'Jane' });
};
调用navigate函数的
，但未声明为任何软件.因此，当您解决第一个错误时，按下按钮Undefined is not a function将会看到另一个错误.因此，要解决此问题，您必须做两件事.首先，声明导航功能，然后绑定onButtonPress方法.
which calls navigate function, but it is not declared anyware. So, when you will resolve first error, you will see another error when you press your button, Undefined is not a function. So, to solve this you have to do two things. First, declare navigate function, second bind onButtonPress method.
onButtonPress() {
const { navigate } = this.props.navigation;
navigate('Home', { name: 'Jane' });
};
并像
constructor(props) {
super(props);
this.state = {};
this.onButtonPress=this.onButtonPress.bind(this);
}
如果您在想什么，到底是什么，请看一下视频视频
If you are thinking, what the hell is binding, take a look at this video
这篇关于反应本地导航器:未定义不是对象(评估this.props.navigation.navigate)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！