React Navigation V5：导航到不同的屏幕

Question

我在 header 上使用 React-Native-Paper Menu 来显示两个项目：Logout 和 Profile

However, I can't seem to navigate to different screen when pressing Logout item.

我在下面包含了零食可行示例、代码片段和屏幕截图：

代码段：

App.js

import { TextInput, Button, Menu, Divider, Provider } from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';

import Register from './Register';
import Logout from './Logout';


const Stack = createStackNavigator();


const CustomMenu = () => {
  const [showMenu, setShowMenu] = React.useState(false);

  return (
    <View style={{}}>
      <Menu
        visible={showMenu}
        onDismiss={() => setShowMenu(false)}
        anchor={
          <TouchableOpacity onPress={() => setShowMenu(true)}>
            <MaterialCommunityIcons
              name="earth"
              size={30}
              style={{ color: 'black' }}
            />
          </TouchableOpacity>
        }>
        <Menu.Item 
          title="Logout"
          onPress={() => {
            setShowMenu(false)
            /* THE FOLLOWING DOESN'T WORK */
            //navigation.navigate('Logout')
          }}  
        />
        <Divider />
        <Menu.Item 
          onPress={() => {
            setShowMenu(false)
          }} 
          title="Profile" 
        />
      </Menu>
    </View>
  );
};



function App() {
  return (
    <Provider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Register"
            component={Register}
            options={({ navigation, route }) => ({

                    headerTitle: () => (
                        <View style={{ flexDirection: 'row' }}>
                          {
                                    /*THIS WORKS*/
                                    <TouchableOpacity
                                        onPress={() => navigation.navigate('Logout')}
                                    >
                                        <MaterialCommunityIcons name="settings" size={30} style={{ 
                                         color: 'black' }} />
                                    </TouchableOpacity>
                                    /*THIS WORKS*/
                         }

                            <View><CustomMenu /></View>

                            <TouchableOpacity
                                onPress={() => navigation.navigate('MenuV2')}
                            >
                                <Text>
                                    Menu
                                </Text>
                            </TouchableOpacity>
                        </View>
                    ),
                    headerStyle: {
                        backgroundColor: '#2e46ff',
                    },
                })}
          />

          <Stack.Screen name="Logout" component={Logout}/>
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

export default App;

截图：

Answer 1

您可以在自定义组件中使用 useNavigation 挂钩作为其内部导航范围，它将按预期工作

const CustomMenu = () => {
  const [showMenu, setShowMenu] = React.useState(false);
  const navigation = useNavigation();
  return (
    <View style={{}}>
      <Menu
        visible={showMenu}
        onDismiss={() => setShowMenu(false)}
        anchor={
          <TouchableOpacity onPress={() => setShowMenu(true)}>
            <MaterialCommunityIcons
              name="earth"
              size={30}
              style={{ color: 'black' }}
            />
          </TouchableOpacity>
        }>
        <Menu.Item
          title="Logout"
          onPress={() => {
            setShowMenu(false);
          }}
        />
        <Divider />
        <Menu.Item
          onPress={() => {
            setShowMenu(false);
            navigation.navigate('Logout');
          }}
          title="Profile"
        />
      </Menu>
    </View>
  );
};

同时考虑使用 Authentication flow 登录注销方案。

Answer 2

您需要传递导航（或使用 useNavigation 挂钩）才能从菜单导航：

<View><CustomMenu navigation={navigation} /></View>

...


const CustomMenu = ({ navigation }) => {
  const [showMenu, setShowMenu] = React.useState(false);

  return (
    <View style={{}}>
      <Menu
        visible={showMenu}
        onDismiss={() => setShowMenu(false)}
        anchor={
          <TouchableOpacity onPress={() => setShowMenu(true)}>
            <MaterialCommunityIcons
              name="earth"
              size={30}
              style={{ color: 'black' }}
            />
          </TouchableOpacity>
        }>
        <Menu.Item 
          title="Logout"
          onPress={() => {
            setShowMenu(false)
            navigation.navigate('Logout');
          }}  
        />
        <Divider />
        <Menu.Item 
          onPress={() => {
            setShowMenu(false)
          }} 
          title="Profile" 
        />
      </Menu>
    </View>
  );
};

React Navigation V5：导航到不同的屏幕

React Navigation V5: Navigate to different Screen

javascript

react-native

react-navigation

react-navigation-v5