我正在尝试创建一个带有自定义内容的 React Navigation 抽屉(我想放置个人资料信息,可能不是任何链接)。我在这样做时遇到了很多麻烦。
这是我的基本堆栈/抽屉:
const Drawer = createDrawerNavigator();
function DrawerNav() {
return (
<ScrollView>
<DrawerItems {...props} />
<Text>Test Content</Text>
</ScrollView>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} options={{
headerShown: false
}} />
<Stack.Screen name="Detail" component={Detail} />
<Stack.Screen name="Chat" component={Chat} />
<Stack.Screen name="Leagues" component={Leagues} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Home" component={Home} options={{
headerRight: (navigation) => (
<TouchableOpacity onPress={(navigation) => navigation.dispatch(DrawerActions.toggleDrawer())}>
<EvilIcons name="navicon" size={50} color="black" />
</TouchableOpacity>
),
headerLeft: () => (
null
),
}} />
<Stack.Screen name="CommForm" component={CommForm} />
</Stack.Navigator>
</NavigationContainer>
);
}
我想要的,实际上我想要的,就是一个侧边栏,我可以通过按 <TouchableOpacity>
来切换它。上面的按钮,里面有自定义内容。
我可以使用 React Native Side Menu 来做到这一点,但似乎如果我使用 React Navigation,我应该学习如何使用这个库来做到这一点,但是似乎很难做我想做的事情.
如何使用 React Navigation 创建包含自定义内容的侧边栏?我主要想使用堆栈导航。
最佳答案
我会做这样的事情:
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItem label="..." />
// ...
</DrawerContentScrollView>
);
}
function StackNavigator({navigation}) {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{
headerRight: () => (
<Button title="press" onPress={() => navigation.toggleDrawer()} />
),
}}
/>
// Your other screens...
</Stack.Navigator>
);
}
function DrawerNavigator({navigation, route}) {
return (
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Stack" component={StackNavigator} />
</Drawer.Navigator>
);
}
const App = () => {
return (
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
);
};
因此,您可以将抽屉式导航设置为主导航器,并将堆栈导航设置为抽屉式导航的屏幕。这样您就可以切换抽屉,而无需先导航到它。
要创建自定义抽屉内容,您可以将组件传递给抽屉导航器上的 drawerContent
。
如果您要像我在本示例中所做的那样使用 DrawerContentScrollView
和/或 DrawerItem
,请务必从 '@react 导入它-导航/抽屉';
.
查看文档以获取更多信息 https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent .
关于javascript - 尝试使用自定义内容创建 React 抽屉导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63476595/