Javascript 堆栈导航器给我未定义的错误
顺便说一下，我正在用 我正在尝试使用Javascript 堆栈导航器给我未定义的错误,javascript,ios,reactjs,react-native,Javascript,Ios,Reactjs,React Native,顺便说一下，我正在用 我正在尝试使用StackNavigator从Login.js转到AboutDendro.js。我的组件中有什么错误导致我的iOS模拟器出现该错误 下面是Login.js： import React, { Component } from 'react'; import { connect } from 'react-redux'; import { ScrollView, Text, TextInput, View, Button, StyleSheet } from '
StackNavigatorLogin.jsAboutDendro.jsiOSLogin.jsimport React, { Component } from 'react';
import { connect } from 'react-redux';
import { ScrollView, Text, TextInput, View, Button, StyleSheet } from 'react-native';
import { login } from '../redux/actions/auth';
import {AuthenticationDetails, CognitoUser, CognitoUserAttribute, CognitoUserPool} from '../lib/aws-cognito-identity';
import StackNavigator from 'react-navigation';
import AboutDendro from './AboutDendro';
const awsCognitoSettings = {
UserPoolId: 'something',
ClientId: 'something'
};
class Login extends Component {
constructor (props) {
super(props);
this.state = {
page: 'Login',
username: '',
password: ''
};
}
get alt () { return (this.state.page === 'Login') ? 'SignUp' : 'Login'; }
handleClick (e) {
e.preventDefault();
const userPool = new CognitoUserPool(awsCognitoSettings);
// Sign up
if (this.state.page === 'SignUp') {
const attributeList = [
new CognitoUserAttribute({ Name: 'email', Value: this.state.username })
];
userPool.signUp(
this.state.username,
this.state.password,
attributeList,
null,
(err, result) => {
if (err) {
alert(err);
this.setState({ username: '', password: '' });
return;
}
console.log(`result = ${JSON.stringify(result)}`);
this.props.onLogin(this.state.username, this.state.password);
}
);
} else {
const authDetails = new AuthenticationDetails({
Username: this.state.username,
Password: this.state.password
});
const cognitoUser = new CognitoUser({
Username: this.state.username,
Pool: userPool
});
cognitoUser.authenticateUser(authDetails, {
onSuccess: (result) => {
console.log(`access token = ${result.getAccessToken().getJwtToken()}`);
this.props.onLogin(this.state.username, this.state.password);
},
onFailure: (err) => {
alert(err);
this.setState({ username: '', password: '' });
return;
}
});
}
}
togglePage (e) {
this.setState({ page: this.alt });
e.preventDefault();
}
static navigationOptions = {
title: 'AboutDendro',
};
render() {
const { navigate } = this.props.navigation;
const App = StackNavigator({
Home: { screen: Login },
Profile: { screen: AboutDendro },
});
return (
<ScrollView style={{padding: 20}}>
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('AboutDendro', { name: 'AboutDendro' })
}
/>
<Text style={{fontSize: 27}}>{this.state.page}</Text>
<TextInput
placeholder='Email Address'
autoCapitalize='none'
autoCorrect={false}
autoFocus={true}
keyboardType='email-address'
value={this.state.username}
onChangeText={(text) => this.setState({ username: text })} />
<TextInput
placeholder='Password'
autoCapitalize='none'
autoCorrect={false}
secureTextEntry={true}
value={this.state.password}
onChangeText={(text) => this.setState({ password: text })} />
<View style={{margin: 7}}/>
<Button onPress={(e) => this.handleClick(e)} title={this.state.page}/>
<View style={styles.firstView}>
<Text onPress={(e) => this.togglePage(e)} style={styles.buttons}>
{this.alt}
</Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
buttons: {
fontSize: 12,
color: 'blue',
flex: 1
},
firstView: {
margin: 7,
flexDirection: 'row',
justifyContent: 'center'
}
});
const mapStateToProps = (state, ownProps) => {
return {
isLoggedIn: state.auth.isLoggedIn
};
}
const mapDispatchToProps = (dispatch) => {
return {
onLogin: (username, password) => { dispatch(login(username, password)); }
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Login);
import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“react native”导入{ScrollView，Text，TextInput，View，Button，StyleSheet}；
从“../redux/actions/auth”导入{login}；
从“../lib/aws cognito identity”导入{AuthenticationDetails，CognitoUser，CognitoUserAttribute，CognitoUserPool}；
从“反应导航”导入StackNavigator；
从“./AboutDendro”导入AboutDendro；
常数awsCognitoSettings={
UserPoolId:“某物”，
ClientId:“有些东西”
};
类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
页面：'登录'，
用户名：“”，
密码：“”
};
}
get alt（）{return（this.state.page=='Login'）？'SignUp'：'Login'；}
handleClick（e）{
e、 预防默认值（）；
const userPool=新CognitoUserPool（awsCognitoSettings）；
//报名
如果（this.state.page==='SignUp'）{
常量属性列表=[
新的CognitoUserAttribute（{Name:'email'，值：this.state.username}）
];
userPool.signUp(
this.state.username，
此.state.password，
属性学家，
无效的
（错误，结果）=>{
如果（错误）{
警惕（err）；
this.setState（{用户名：''，密码：'}）；
返回；
}
log（`result=${JSON.stringify（result）}`）；
this.props.onLogin（this.state.username、this.state.password）；
}
);
}否则{
const authDetails=新的AuthenticationDetails({
用户名：this.state.Username，
密码：this.state.Password
});
const cognitoUser=新的cognitoUser({
用户名：this.state.Username，
池：用户池
});
cognitoUser.authenticateUser（authDetails{
onSuccess：（结果）=>{
log（`access token=${result.getAccessToken（）.getJwtToken（）}`）；
this.props.onLogin（this.state.username、this.state.password）；
},
onFailure：（错误）=>{
警惕（err）；
this.setState（{用户名：''，密码：'}）；
返回；
}
});
}
}
切换页面（e）{
this.setState（{page:this.alt}）；
e、 预防默认值（）；
}
静态导航选项={
标题：“AboutDendro”，
};
render（）{
const{navigate}=this.props.navigation；
const App=StackNavigator({
主页：{屏幕：登录}，
配置文件：{screen:AboutDendro}，
});
返回(
导航（'AboutDendro'，{name:'AboutDendro'}）
}
/>
{this.state.page}
this.setState（{username:text}）}/>
this.setState（{password:text}）}/>
this.handleClick（e）}title={this.state.page}/>
this.togglePage（e）}style={style.buttons}>
{this.alt}
);
}
}
const styles=StyleSheet.create({
按钮：{
尺寸：12，
颜色：“蓝色”，
弹性：1
},
第一视图：{
差额：7，
flexDirection:'行'，
为内容辩护：“中心”
}
});
const mapStateToProps=（state，ownProps）=>{
返回{
isLoggedIn:state.auth.isLoggedIn
};
}
const mapDispatchToProps=（调度）=>{
返回{
onLogin：（用户名，密码）=>{dispatch（登录（用户名，密码））；}
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（登录）；
这是因为导航
不在您的道具中。它是您创建的应用程序组件的一部分。但是你对这个组件什么也不做
您应该有一个App.js
文件，使用stackNavigator将登录组件设置为stackNavigator参数中的默认组件
看看这是因为导航
不在您的道具中。它是您创建的应用程序组件的一部分。但是你对这个组件什么也不做
您应该有一个App.js
文件，使用stackNavigator将登录组件设置为stackNavigator参数中的默认组件
看看我试图重构你的代码。
在componentrender
中，您可以只编写：
render() {
const { navigate } = this.props.navigation;
return (
<ScrollView style={{padding: 20}}>
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'AboutDendro' })
}
/>
<Text style={{fontSize: 27}}>{this.state.page}</Text>
<TextInput
placeholder='Email Address'
autoCapitalize='none'
autoCorrect={false}
autoFocus={true}
keyboardType='email-address'
value={this.state.username}
onChangeText={(text) => this.setState({ username: text })} />
<TextInput
placeholder='Password'
autoCapitalize='none'
autoCorrect={false}
secureTextEntry={true}
value={this.state.password}
onChangeText={(text) => this.setState({ password: text })} />
<View style={{margin: 7}}/>
<Button onPress={(e) => this.handleClick(e)} title={this.state.page}/>
<View style={styles.firstView}>
<Text onPress={(e) => this.togglePage(e)} style={styles.buttons}>
{this.alt}
</Text>
</View>
</ScrollView>
);
}
}
然后在index.ios.js
中导入组件应用程序，如：
const App = StackNavigator({
Home: { screen: Login },
Profile: { screen: AboutDendro },
});
import./Login'
就这样。也许我的答案可以帮助你。我尝试重构你的代码。
在componentrender
中，您可以只编写：
render() {
const { navigate } = this.props.navigation;
return (
<ScrollView style={{padding: 20}}>
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'AboutDendro' })
}
/>
<Text style={{fontSize: 27}}>{this.state.page}</Text>
<TextInput
placeholder='Email Address'
autoCapitalize='none'
autoCorrect={false}
autoFocus={true}
keyboardType='email-address'
value={this.state.username}
onChangeText={(text) => this.setState({ username: text })} />
<TextInput
placeholder='Password'
autoCapitalize='none'
autoCorrect={false}
secureTextEntry={true}
value={this.state.password}
onChangeText={(text) => this.setState({ password: text })} />
<View style={{margin: 7}}/>
<Button onPress={(e) => this.handleClick(e)} title={this.state.page}/>
<View style={styles.firstView}>
<Text onPress={(e) => this.togglePage(e)} style={styles.buttons}>
{this.alt}
</Text>
</View>
</ScrollView>
);
}
}
然后在index.ios.js
中导入组件应用程序，如：
const App = StackNavigator({
Home: { screen: Login },
Profile: { screen: AboutDendro },
});
import./Login'
就这样。也许我的回答可以帮助你