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

Question

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

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

我阅读了有关 react-navigation (https://reactnavigation.org/docs/en/custom-navigators.html) 的文档，但对所有内容都不太了解。但是，我只需要一种在骑行侧带有自定义 Tab 的 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-navigation 在本机应用程序中使用抽屉..

使用 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/drawer-navigation-with-custom-side-menu-react-native-fbd5680060ba

创建自定义侧边栏始终固定：--- 不要使用抽屉。我通过使用 hoc（高阶组件）来实现它 拳头制作高阶组件 as 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 可用于您只想使用上述语法的每个屏幕。 您也可以只将它放在您的根级组件中一次，以便为整个组件获取它（它取决于您如何实现它）。