Question

我是React Native的新手，并且在一个项目的几个屏幕的右侧（5个按钮）都有一个菜单。我想做的就是对带有容器的整个应用程序仅使用一次此菜单，然后根据所选按钮更改容器的内容，就像在Android中使用fragment和fragmentManager.replace ...

开发了屏幕和菜单，但我真的不知道如何正确混合所有内容。

我阅读了有关反应导航（https://reactnavigation.org/docs/en/custom-navigators.html）的文档，但对所有内容都不了解。但是，我只需要一种TabNavigator，在骑行侧具有自定义Tab。

请帮助我。

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-navigation在react native应用中抽屉。

使用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
});

DrawerContainer .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/drawer-navigation-with-custom-side-menu-react-native-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;

现在仅将屏幕与此临时对象连接：--

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

仅在使用上述语法的每个屏幕上都可以使用此HOC。您也可以只将它放在根级组件中一次，以获取整个组件的使用权（如何执行此操作将取决于您）。

React Native中的自定义导航菜单

2 个答案: