我们如何在 React Native 中创建侧选项卡答案

【问题标题】：How can we create Side Tabs in React Native我们如何在 React Native 中创建侧选项卡
【发布时间】：2020-03-23 13:37:21
【问题描述】：

在 React 应用程序中创建侧边菜单。这适用于 Expo 和 react

【问题讨论】：

标签： reactjs react-native react-redux react-router

【解决方案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 导入 NavigationService；

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 />

只要您想显示此侧边菜单。如果您有任何疑问，请回信。

【讨论】：