我使用的是 React-Native-纸质菜单 上显示两个项目。Logout
和 Profile
但是,当我按下 "我的 "键时,似乎无法导航到不同的屏幕。
Logout
项目。
我在下面附上了小吃可行的例子、代码片段和截图。
Code Snippet:
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;
屏幕截图:我正在使用React-Native-Paper Menu在头部显示两个项目。
你可以在自定义组件中使用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>
);
};
也可以考虑使用 认证流程 用于登录注销场景。
您需要通过导航(或使用 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>
);
};