reactjs - React Navigation 5 - 如何从 headerRight 导航?
问题描述
我仍然试图理解这个反应导航 5.0。仅供参考,我正在使用博览会,现在从一个页面导航到另一个页面时没有问题,问题是当我为 headerRight 放置导航时。我将 headerRight 放入 Stack.Navigator 中,因为我希望可以从其他屏幕访问此按钮。
所以基本上问题是,我想在 headerRight 中放置注销按钮,但是当我尝试放置 navigation.navigate 时,它说未定义不是对象(评估'_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 - 反应路由器的 PrivateRoute 中的 isAuthenticated 问题
- spring - 如何将部分源数据属性发送到不同的目标
- python - Python 枚举
- excel - 为什么 Excel 无法识别 SUMPRODUCT 函数中的变量名称?
- java - 使用递归的 Reve 谜题的最优解
- html - ::-webkit-calendar-picker-indicator 在 Android 上不起作用
- javascript - 在vue中更改arcgis地图位置
- llvm - 如何从 MachO 二进制文件中提取 __bitcode/__bundle 部分
- swift - 当快照侦听器生效时,Tableview Like 按钮会重复
- python - 如何根据预先确定的兑换率兑换货币?(Python)