not本机导航:未定义不是对象(计算'_this2.props.navigation.navigate‘)
not本机导航:未定义不是对象(计算'_this2.props.navigation.navigate‘)
提问于 2020-10-28 10:58:35
我是新的反应母语和学习“导航”。我的实践流程是: App.js -> login.js -> dashboard.js -> updateUser.js，运行良好。我也在使用一个反应本机选项卡视图库。当用户从login.js导航到dashboard.js时，他看到了3个选项卡，其中一个是只有一个按钮的updateUser.js，我希望当我单击它时，我应该再次被重定向到login.js。它是错误的，因为：
TypeError:未定义的对象不是一个对象(求值‘_ object 2.pros.Naviting.导航
当我在dashboard.js中粘贴相同的代码时，它就可以正常工作了。(我成功地重定向到login.js )。任何帮助都将不胜感激。造成错误的可能原因是我不知道在哪里声明路线等。这是我的updateUser.js
export default class UpdateInfo extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.loginBtn}
onPress={() => this.props.navigation.navigate('Login')}
>
<Text style={styles.loginText}>Go to Login</Text>
</TouchableOpacity>
</View>
);
}
}这是我的App.js
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator
initialRouteName="Login"
screenOptions={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#fb5b5a',
},
headerTintColor: '#003f5c',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<Stack.Screen
name="Login"
component={Login}
options={
{title: 'Login'},
{headerLeft: null}
}
/>
<Stack.Screen
name="Dashboard"
component={Dashboard}
options={
{ title: 'Dashboards' },
{headerLeft: null}
}
/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}我的dashboard.js
export default function Dashboard() {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'ALL PROFILE' },
{ key: 'second', title: 'ADD PROFILE' },
{ key: 'third', title: 'UPDATE INFO' },
]);
const renderScene = ({ route }) => {
switch (route.key) {
case 'first':
return <AllProfile />;
case 'second':
return <AddProfile />;
case 'third':
return <UpdateInfo/>
default:
return null;
}
};
return (
<TabView
navigationState={{ index, routes }}
renderTabBar={props => (
<TabBar
{...props}
renderLabel={({ route, color }) => (
<Text style={{ color: '#fb5b5a', fontWeight: "bold" }}>
{route.title}
</Text>
)}
style={{backgroundColor: '#003f5c'}}
/>
)}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
style={styles.dashboardContainer}
/>
);
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-10-28 11:12:57
您必须手动传递导航，因为它不是像下面这样的屏幕，只有导航中的屏幕才能获得导航支柱。如果它是一个功能组件，您可以使用useNavigation挂钩并访问导航。在你的情况下，你必须像下面这样做
export default function Dashboard({navigation}) {和
<UpdateInfo navigation={navigation}/>Stack Overflow用户
发布于 2020-10-28 11:15:50
带钩
class UpdateInfo extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.loginBtn}
onPress={() => this.props.navigation.navigate('Login')}
>
<Text style={styles.loginText}>Go to Login</Text>
</TouchableOpacity>
</View>
);
}
}
// Wrap and export
export default function(props) {
const navigation = useNavigation();
return <UpdateInfo navigation={navigation} />;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64571432
复制相关文章
相似问题
腾讯云开发者
