侧面菜单B. React Native 反应导航
我用
在
我想创建一个侧面菜单，将作为从左到右的覆盖值打开并填充 80-90% 宽度。
没有反应导航，可以使用这种包装。 , 作为
, 但我想知道我是否可以获得完全相同的功能 DrawerNavigator.
但似乎 DrawerNavigator 有菜单按钮。 难以自己设置叠加吗？
编辑
决定 1
一种使用方法
但是，你可以从所有屏幕中拖到盒子中
,
和
, 我想要的时候 , 在那里
, 因为 StackNavigator 归档 DrawerNavigator.
决定 2
另一种解决方案是使用
但那么标题
它将来自上面，因为 DrawerNavigator 归档
.
react-navigation
在
React Native
我想创建一个侧面菜单，将作为从左到右的覆盖值打开并填充 80-90% 宽度。
没有反应导航，可以使用这种包装。 , 作为
react-native-side-bar
, 但我想知道我是否可以获得完全相同的功能 DrawerNavigator.
但似乎 DrawerNavigator 有菜单按钮。 难以自己设置叠加吗？
编辑
决定 1
一种使用方法
const MyStackNavigator = StackNavigator/{
A: { screen: AScreen },
B: { screen: BScreen },
C: { screen: CScreen }
}/;
const RootNavigator = DrawerNavigator/{
A: { screen: MyStackNavigator },
}, {
// set content of side bar
contentComponent: /props/ => <sidebar></sidebar>
}/;但是，你可以从所有屏幕中拖到盒子中
AScreen
,
BScreen
和
CScreen
, 我想要的时候 , 在那里
AScreen
, 因为 StackNavigator 归档 DrawerNavigator.
决定 2
另一种解决方案是使用
const MyDrawerNavigator = DrawerNavigator/{
A: { screen: AScreen },
}, {
// set content of side bar
contentComponent: /props/ => <sidebar></sidebar>
}/;
const RootNavigator = StackNavigator/{
A: { screen: MyDrawerNavigator },
B: { screen: BScreen },
C: { screen: CScreen }
}/;但那么标题
AScreen
它将来自上面，因为 DrawerNavigator 归档
A
.
没有找到相关结果
已邀请:
1 个回复
帅驴
赞同来自:
这是我的导航器设置：
const MainNavigator = DrawerNavigator/{Home: {
screen: StackNavigator/{
Search: {
screen: SearchScreen
},
Result: {
screen: ResultScreen
}
}/
},
Saved: {
screen: StackNavigator/{
SavedStack: {
screen: SavedWordsScreen
}
}/
},
About: {
screen: StackNavigator/{
AboutStack: {
screen: AboutScreen
}
}/
}
},{
contentComponent: props => /<drawer drawerprops="{{...props}}" navigation="{props.navigation}"></drawer>/
}/;
如您所见，我创建了一个包含我自定义框内容的框组件。 这是此组件的基本设置：
import React, { Component } from 'react';
import { ScrollView, View, Text } from 'react-native';
import { Button } from 'react-native-elements';
class Drawer extends Component {
render// {
return /
<view>
<button =="" onpress="{//" title="Search"> this.props.navigation.navigate/'Home'/} />
<button =="" onpress="{//" title="Saved"> this.props.navigation.navigate/'Saved'/} />
<button =="" onpress="{//" title="About"> this.props.navigation.navigate/'About'/} />
</button></button></button></view>
/;
}
}
我希望它会有所帮助。 我简化了代码的某些部分主要显示相应的位，因此如果您有任何其他问题，请询问！