Как мы можем создавать боковые вкладки в React Native?

Question

Создание бокового меню в приложении React. Это будет работать как с Экспо и реагировать

Answer 1

Создание службы навигации (Navigation-service.ts)

import { NavigationActions } from 'react-navigation';

function navigate(routeName: any, params?: any) {
  NavigationActions.navigate({
    routeName,
    params
  });
  setRoute(routeName);
}
export default {
  navigate
}

После этого создайте новый файл sidemnu.tsx для импорта службы навигации из Navigation-service.ts;

import { View, TouchableHighlight, Image } from 'react-native';
openHome() {
    NavigationService.navigate('Home');
}
render(){
return (
<View style={[this.props.isLoggedIn ? styles.container : styles.containerHidden]}>
    <View style={[this.props.isLoggedIn ? styles.tabContainer : styles.tabContainerHidden]}>
        <View>
            <TouchableHighlight
                style={this.props.currentTab === 'Home' ? styles.activeTab : styles.menuBtnContainer}
                onPress={() => this.openHome()}
                disabled={!this.props.isLoggedIn}
                underlayColor='red'
            >
                <Image
                    source='any  image url'
                />
            </TouchableHighlight>
        </View>
    </View>
</View>
);
}

Добавить стиль

import { StyleSheet } from 'react-native';
const styles =  StyleSheet.create({
  container: {
    width: 108,
    backgroundColor: '#002A5C',
    borderTopColor: '#002457',
    borderWidth: 1
  },
  containerHidden: {
    width: 108,
    backgroundColor: '#002A5C'
  },
  tabContainer: {
    flex: 1,
    flexDirection: 'column'
    },
    tabContainerHidden: {
    flex: 1,
    display: 'none'
    },
    activeTab: {
    backgroundColor: '#008cc3',
    height: 108,
    width: 108,
    padding: 10,
    alignSelf: 'center',
    justifyContent: 'center'
  },
  menuBtnContainer: {
    height: 80,
    width: 80,
    alignSelf: 'center',
    justifyContent: 'center'
  },
});

Вызовите файл app.tsx

<Sidemnu />

Всякий раз, когда вы хотите отобразить это боковое меню. Если у вас есть какие-либо вопросы, пожалуйста, напишите обратно.