React Native中的自定义导航器菜单

Question

我是React Native的新手，有一个项目在几个屏幕上的右侧有一种菜单(5个按钮(。我想做的是，对于带有容器的整个应用程序，只使用此菜单一次，并根据所选按钮更改容器的内容，就像在Android中使用fragment和fragmentManager一样。替换…

屏幕和菜单都开发好了，但我真的不知道如何正确地混合所有东西。

我读了关于react导航的文档(https://reactnavigation.org/docs/en/custom-navigators.html)但不是什么都懂。然而，我只需要一种在骑行侧带有自定义选项卡的TabNavigator。

请帮帮我。

Answer 1

不知道你的意思，但我认为你可以试试这样的东西：

const CustomDrawer = createDrawerNavigator({
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
})
const RootNavigator = createStackNavigator({
MainScreen: {
screen: MainScreen,
},
CustomDrawer: { screen: CustomDrawer }
},
{
initialRouteName: 'Init',
})

基本上，您可以在右侧/左侧创建抽屉。在上面加上你的5个屏幕，然后你就可以使用抽屉在这些屏幕之间导航了。另外，您将在stackNavigator上实例化您的抽屉，该导航器将处理导航。你也可以在上面设置你的主屏幕和其他一切。

Answer 2

我想您想要使用react导航的react原生应用程序中的抽屉。。

使用createDrawerNavigator，它为您提供自定义设计侧栏

createDrawerNavigator({
screen: {..your screen stack here...}
}, {
headerMode: 'none',
gesturesEnabled: false,
contentComponent: DrawerContainer, /// DrawerContainer is custom component container for all tabs
drawerBackgroundColor: 'transparent',
drawerWidth: 240,
useNativeAnimations: true
});

抽屉容器.js:---

export default class DrawerContainer extends React.Component { 
render() {
return ( 
<View style={{flex:1}}>
<TouchableOpacity
style={{borderBottomColor: '#fff', height: 40}}
onPress={() => this.props.navigation.navigate('screen name')}
>
<Text style={{color: '#FFFFFF',fontSize: 18}} 
type='h5White'>your tab name</Text>
</TouchableOpacity> 
</View> 
); 
} 

}

有关更多详细信息，请访问https://medium.freecodecamp.org/how-to-build-a-nested-drawer-menu-with-react-native-a1c2fdcab6c9

学习本教程https://medium.com/@mehulmistri/带出口的导航绘图机-手动-激活-fbd5680060ba

创建始终固定的自定义侧栏：---不要使用抽屉。我是用hoc(高阶组件(制作的首先制作高阶组件作为sidebar.js

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';

const withSidebar = WrappedComponent => class extends Component {
constructor(props) {
super(props);
this.state = { isConnected: true };
}
render() {
return (
<View style={styles.container}>
<View style={{width:50, top:20, backgroundColor: 'grey',}}>
<TouchableOpacity
style={styles.menu}
onPress={() => console.log('code')}
>
<Text style={styles.menuText} type='h5White'>first</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.menu}
onPress={() => console.log('code')}
>
<Text style={styles.menuText} type='h5White'>second</Text>
</TouchableOpacity>
</View>
<View style={{flex:1, backgroundColor: 'red', top:20}}>
<WrappedComponent {...this.props} /> 
</View>
</View>
);
}
}; 

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
flexDirection: 'row',
},
welcome: {
flex: 1,
margin: 20,
backgroundColor: 'orange',
margin: 10,
textAlign: 'center',
fontSize: 20,
paddingTop: 70,
},
menu: {
paddingHorizontal: 7,
borderBottomWidth: 1,
borderBottomColor: '#fff',
height: 40,
justifyContent: 'center'
},
menuText: {
justifyContent: 'center',
color: '#FFFFFF',
fontSize: 10,
fontWeight: 'bold'
},
});
export default withSidebar;

现在只将您的屏幕连接到此hoc:--

import sidebar.js in your screen as
import withSidebar from 'sidebar'
export default connect(mapStateToProps, mapDispatchToProps)(withSidebar(yourScreenName));

这个HOC适用于您只想使用上述语法的每个屏幕。您也可以只将它放在根级组件中一次，就可以为整个组件获取它(如何实现它取决于您(。