reactjs React Navigation 5 -如何从headerRight导航?

rnmwe5a2  于 2023-11-18  发布在  React
关注(0)|答案(2)|浏览(114)

我仍然试图理解这个React导航5.0. Fyi我使用博览会,现在没有问题时,从一个页面导航到其他,问题是当我把导航的headerRight.我把headerRight在堆栈.导航,因为我希望这个按钮可以从其他屏幕访问.
所以基本上问题是,我想把注销按钮在headerRight,但当我试图把导航.导航它sait undefined不是一个对象(评估'_this. props')
然后我试着调用一个函数(单击),问题是undefined不是一个对象。
我可以知道我的代码有什么问题吗?
下面是我的完整代码:

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>
  );
}

字符串
谢谢你之前

cidc1ykv

cidc1ykv1#

你应该试试这个。
通过将属性screenOptions转换为函数,可以接收到对路由器(navigation)的引用。

screenOptions={({route, navigation}) => ({ // get reference to navigation
   headerRight: () => (
      <Button
        onPress={() => navigation.navigate('Home'); // call .navigate on navigation
      />
    )
  })}

字符串

46qrfjad

46qrfjad2#

我的答案是。你必须传递“导航”,并将“选项”转换为函数

<Stack.Screen
      // some code ...
            options={({ navigation }) => ({
              headerRight: () => (
                <TouchableOpacity onPress={() => navigation.navigate("pageYouWantNavigateTo")} > 

     // some component ...
              
                </TouchableOpacity>
              ),
            })}
          />

字符串

相关问题