gpt4 book ai didi

android - react native - "undefined is not an object react native evaluating this.props.navigation"

转载 作者:行者123 更新时间:2023-11-28 23:54:39 25 4
gpt4 key购买 nike

我见过很多人遇到这个问题,但没有人的答案能为我解决这个错误。我得到的错误是:

undefined is not an object react native evaluating this.props.navigation Here is a picture https://imgur.com/a/JP9RLZT

我的目标是创建一个登录屏幕,该屏幕通向具有选项卡栏的主屏幕。该栏可以工作,但由于上述错误,我不知道如何使登录屏幕打开到该屏幕。

我的适用文件代码如下所示:

应用程序.js

  import React from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation'
import MainScreen from './Components/MainScreen'
import Login from './Components/Login/Login'

export default class App extends React.Component {
static navigationOptions = {
title: 'LoginScreen',
headerStyle: {
backgroundColor: '#212121',
},
headerTitleStyle: {
color: '#fff'
}
};

render() {
//const { navigate } = this.props.navigation;
return (
<Login />
);
}

}

const AppStackNavigator = StackNavigator({

Login: {
screen: Login
},
Main: {
screen: MainScreen
},

},
{
initialRouteName: 'Login'
}

)



const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
})

AppRegistry.registerComponent('BIDMCATHOME', () => AppStackNavigator);

这是我的登录屏幕代码

 import React, { Component } from "react";
import {
Text,
} from "react-native";
import { Alert, Button, TextInput, View, StyleSheet } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { DrawerNavigator } from 'react-navigation';


import { Icon } from 'native-base'

export default class Login extends Component {


constructor(props) {
super(props);
const { navigate } = this.props.navigation;
this.state = {
username: '',
password: '',
};
}

onLogin() {
const { username, password } = this.state;

// Alert.alert('Credentials', `${username} + ${password}`);
}





render() {
const { navigate } = this.props.navigation

return (
<View style={styles.container}>
<TextInput
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
placeholder={'Username'}
style={styles.input}
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
placeholder={'Password'}
secureTextEntry={true}
style={styles.input}
/>

<Button
value={this.state.Login}
title={'Login'}
style={styles.input}
onPress={() =>
navigate('MainScreen', { name: 'MainScreen' })}/>


</View>
);
}
}




const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
},
});

这是我的主屏幕(标签栏屏幕代码)

import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Platform
} from "react-native";

import HomeTab from './AppTabNavigator/HomeTab'
import SearchTab from './AppTabNavigator/SearchTab'
import AddMediaTab from './AppTabNavigator/AddMediaTab'
import LikesTab from './AppTabNavigator/LikesTab'
import ProfileTab from './AppTabNavigator/ProfileTab'

import { TabNavigator } from 'react-navigation'
import { Icon } from 'native-base'

class MainScreen extends Component {

static navigationOptions =
{
title: 'MainScreen',
};


render() {
return (
<AppTabNavigator />
);
}
}
export default MainScreen;

const AppTabNavigator = TabNavigator({

HomeTab: {
screen: HomeTab
},
SecondTab: {
screen: SearchTab

},
ThirdTab: {
screen: AddMediaTab
},
MedList: {
screen: LikesTab
},
ProfileTab: {
screen: ProfileTab
}

}, {
animationEnabled: false,
swipeEnabled: true,
tabBarPosition: "bottom",
tabBarOptions: {
style: {
...Platform.select({
android: {
backgroundColor: 'white'
}
})
},
activeTintColor: '#000',
inactiveTintColor: '#d1cece',
showLabel: true,
showIcon: false
}
})

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});

最佳答案

当您使用组件并希望通过该组件导航到其他页面时,您必须将 this.props.navigation 传递给该组件。在您的代码中,您使用 Login 作为组件,因此您可以使用以下代码:

render() {
//const { navigate } = this.props.navigation;
return (
<Login navigation={this.props.navigation} />
);
}

希望这对你有帮助..

关于android - react native - "undefined is not an object react native evaluating this.props.navigation",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51471108/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com