我仍然试图理解这个 react 导航 5.0。
仅供引用,我正在使用 expo,现在从一页导航到另一页没有问题,
问题是当我为 headerRight 放置导航时。
我将 headerRight 放在 Stack.Navigator 中,因为我希望可以从其他屏幕访问此按钮。
所以基本上问题是,
我想在 headerRight 中放置注销按钮,
但是当我尝试放置 navigation.navigate 时,它认为 undefined 不是一个对象(评估“_this.props”)
然后我尝试调用一个函数(handleClick),
问题未定义也不是对象。
我可以知道我的代码有什么问题吗?
以下是我的完整代码:
import * as React from 'react';
import { Button, View, Text, TextInput, Image, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './src/pages/auth/Login';
import HomeScreen from './src/pages/auth/HomeScreen';
const Stack = createStackNavigator();
export default function App() {
// handleClick = () => {
// this.props.navigation.navigate('Login');
// }
return (
<NavigationContainer>
<Stack.Navigator mode="modal" initialRouteName="Login" screenOptions={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerRight: () => (
<Button
// only alert is ok, the other is error.
// onPress={() => alert('Success Logout!')}
onPress={this.handleClick}
// onPress={this.props.navigation.navigate('Home')}
title="Logout"
color="#fff"
/>
),
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<Stack.Screen name="Login"
name="Login"
component={LoginScreen}
options={{
title: 'Simple Scorecard',
}} />
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
title: 'Home Menu',
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
之前谢谢
最佳答案
你应该试试这个。
您通过转换属性 navigation
收到对路由器的引用 ( screenOptions
)到一个函数。
screenOptions={({route, navigation}) => ({ // get reference to navigation
headerRight: () => (
<Button
onPress={() => navigation.navigate('Home'); // call .navigate on navigation
/>
)
})}
关于reactjs - React Navigation 5 - 如何从 headerRight 导航?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62127078/