Пользовательское меню навигатора в React Native - PullRequest
Новая
       22

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

0 голосов
/ 21 ноября 2018

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

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

Я читаю документацию о реагирующей навигации (https://reactnavigation.org/docs/en/custom-navigators.html), но плохо все понимаю. Однако мне просто нужен своего рода TabNavigator с настраиваемой вкладкой на боковой панели.

Пожалуйстапомоги мне.

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

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

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

0 голосов
/ 21 ноября 2018

Не знаю, что вы имеете в виду, но я думаю, что вы можете попробовать что-то вроде этого: 

const CustomDrawer = createDrawerNavigator({
  Screen1: {
    screen: Screen1,
  },
  Screen2: {
    screen: Screen2,
  },
})

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

По сути, вы можете создать ящик справа / слева.И добавьте на него свои 5 экранов, затем вы будете использовать ящик для навигации между этими экранами.Кроме того, вы создадите свой ящик в stackNavigator, который будет обрабатывать навигацию.Вы также можете установить на нем свой главный экран и все остальное.

...