Пользовательское меню навигатора в React Native

Question

Я новичок в React Native и имею проект с неким меню на правой стороне (5 кнопок) на нескольких экранах. Что я хочу сделать, это использовать это меню только один раз для всего приложения с контейнером и изменить содержимое контейнера в соответствии с выбранной кнопкой, как в Android с фрагментом и фрагментом Manager.replace...

Экраны и меню разработаны, но я действительно не знаю, как правильно все перемешать.

Я читаю документацию о реагирующей навигации ( 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

Я думаю, что вы хотите ящик в реагировать родное приложение с использованием реагирования навигации...

используйте 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 (Компоненты высшего порядка).Fist делает компоненты высшего порядка в качестве 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 доступен для каждого экрана, где вы хотите просто использовать вышеуказанный синтаксис. Вы также можете поместить его в свой компонент корневого уровня только один раз, чтобы получить его для целых компонентов (это зависит от того, как вы это реализуете).