比较来自世界各地的卖家的域名和 IT 服务价格

侧面菜单B. React Native 反应导航

我用
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

.
已邀请:

帅驴

赞同来自:

我需要你描述的相同功能,我设法让她的工作 React navigation. 原则上,我需要一个完全用户盒 /侧边栏/.

这是我的导航器设置:


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'/} /&gt;
<button =="" onpress="{//" title="Saved"> this.props.navigation.navigate/'Saved'/} /&gt;
<button =="" onpress="{//" title="About"> this.props.navigation.navigate/'About'/} /&gt;
</button></button></button></view>
/;
}
}


我希望它会有所帮助。 我简化了代码的某些部分主要显示相应的位,因此如果您有任何其他问题,请询问!

要回复问题请先登录注册