Question

我在标题上使用React-Native-Paper Menu来显示两项：Logout和Profile

但是，按时我似乎无法导航到其他屏幕 Logout个项目。

我在下面提供了零食可行的示例，代码段和屏幕截图：

代码段：

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挂钩作为其内部导航范围，它将按预期工作

var a = [];
x();
y();


function x(){
    //ajax call 1 - updates the array 'a' in its 'success'. Done async!

}
function y(){
        filters = []   //some filter
        $.ajax({
                type : 'POST',
                url : "get-other-data",
                dataType : 'json',
                async: "true",
                data:JSON.stringify(filters),
                contentType: 'application/json; charset=utf-8',
                success : function(data){

                    while(a.length == 0);
                    z(a,data);           // Want this to execute only after 'a' has been updated


                },
                failure: function(data){
                    alert('got an error');
                }
            });

}
function z(a,data){
  //does something
}

还考虑将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：导航到其他屏幕

2 个答案: