[英]React Navigation V5: Navigate to different Screen
我在 header 上使用React-Native-Paper 菜单来显示两个项目: Logout
和Profile
但是,按
Logout
项目时,我似乎无法导航到不同的屏幕。
我在下面包含了可以吃零食的示例、代码片段和屏幕截图:
代码片段:
应用程序.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;
截屏:
您可以在自定义组件中使用 useNavigation 挂钩作为其内部导航 scope 它将按预期工作
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>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.