底部标签是现在App的基本菜单实现
下面分别用 createBottomTabNavigator 和 createMaterialBottomTabNavigator 两种方法分别实现底部菜单
但此两种方法实现的效果，均 不支持滑动切换 ，支持滑动切换 会在后续文章中增加
效果预览如下：
先做一些准备工作：
1、index.js
/** * @format */ import {AppRegistry} from ‘react-native‘; import App from ‘./src/App‘; import {name as appName} from ‘./app.json‘; AppRegistry.registerComponent(appName, () => App);
2、四个菜单文件，以src/Home.js为例
import React, {Component} from ‘react‘;
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from ‘react-native‘;
class Home extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} activeOpacity={0.5}>
<Text style={{color: ‘white‘}}>首页</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘#F5FCFF‘,
},
button: {
width: 120,
height: 45,
borderRadius: 5,
alignItems: ‘center‘,
justifyContent: ‘center‘,
backgroundColor: ‘#4398ff‘,
}
});
module.exports = Home;
其他几个菜单，也知识 显示的文字有差别而已！
第一种方法，使用 createBottomTabNavigator ：
1）安装依赖
npm install react-navigation --save
安装完后项目根目录下Package.json文件中依赖如下：
"react": "16.8.3",
"react-native": "0.59.5",
"react-native-gesture-handler": "^1.2.1",
"react-navigation": "^3.9.1"
2）调用代码src/App.js
import React, {Component} from ‘react‘;
import {Image} from ‘react-native‘;
import {
createBottomTabNavigator, createAppContainer
} from ‘react-navigation‘;
//展示的页面
import Home from ‘./Home‘;
import Contact from ‘./Contact‘;
import Discover from ‘./Discover‘;
import Mine from ‘./Mine‘;
//Tab
const TabNavigator = createBottomTabNavigator({
Home: {
screen: Home,//当前选项卡加载的页面
navigationOptions: {
tabBarLabel: ‘新闻‘,
tabBarIcon: ({tintColor, focused}) => (
<Image
source={focused ? require(‘./main_tab_home_icon_pressed.png‘) : require(‘./main_tab_home_icon.png‘)}
style={[{height: 24, width: 24}]}
/>
),
},
},
Contact: {
screen: Contact,
navigationOptions: {
tabBarLabel: ‘视频‘,
tabBarIcon: ({tintColor, focused}) => (
<Image
source={focused ? require(‘./main_tab_video_icon_pressed.png‘) : require(‘./main_tab_video_icon.png‘)}
style={[{height: 24, width: 24}]}
/>
),
},
},
Discover: {
screen: Discover,
navigationOptions: {
tabBarLabel: ‘图片‘,
tabBarIcon: ({tintColor, focused}) => (
<Image
source={focused ? require(‘./main_tab_image_icon_pressed.png‘) : require(‘./main_tab_image_icon.png‘)}
style={[{height: 24, width: 24}]}/>
),
}
},
Mine: {
screen: Mine,
navigationOptions: {
tabBarLabel: ‘我的‘,
tabBarIcon: ({tintColor, focused}) => (
<Image
source={focused ? require(‘./main_tab_user_icon_pressed.png‘) : require(‘./main_tab_user_icon.png‘)}
style={[{height: 24, width: 24}]}/>
),
}
},
}, {
tabBarOptions: {
activeTintColor: ‘#45C018‘,
}
});
export default createAppContainer(TabNavigator);
第二种方法，使用 createMaterialBottomTabNavigator：
1）安装依赖 (在前面 npm install react-navigation --save 的基础上再安装)
npm install react-navigation-material-bottom-tabs react-native-paper react-native-vector-icons --save
安装完后项目根目录下Package.json文件中依赖如下：
"react": "16.8.3",
"react-native": "0.59.5",
"react-native-gesture-handler": "^1.2.1",
"react-native-paper": "^2.15.2",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "^3.9.1",
"react-navigation-material-bottom-tabs": "^1.0.0"
2）调用代码src/App.js
import React from ‘react‘; import {Image} from ‘react-native‘; import {createAppContainer} from ‘react-navigation‘; import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs"; //展示的页面 import Home from ‘./Home‘; import Contact from ‘./Contact‘; import Discover from ‘./Discover‘; import Mine from ‘./Mine‘; //Tab const TabNavigator = createMaterialBottomTabNavigator({ Home: { screen: Home,//当前选项卡加载的页面 navigationOptions: { tabBarLabel: ‘新闻‘, tabBarIcon: ({tintColor, focused}) => ( <Image source={focused ? require(‘./main_tab_home_icon_pressed.png‘) : require(‘./main_tab_home_icon.png‘)} style={[{height: 24, width: 24}]} /> ), }, }, Contact: { screen: Contact, navigationOptions: { tabBarLabel: ‘视频‘, tabBarIcon: ({tintColor, focused}) => ( <Image source={focused ? require(‘./main_tab_video_icon_pressed.png‘) : require(‘./main_tab_video_icon.png‘)} style={[{height: 24, width: 24}]} /> ), }, }, Discover: { screen: Discover, navigationOptions: { tabBarLabel: ‘图片‘, tabBarIcon: ({tintColor, focused}) => ( <Image source={focused ? require(‘./main_tab_image_icon_pressed.png‘) : require(‘./main_tab_image_icon.png‘)} style={[{height: 24, width: 24}]}/> ), } }, Mine: { screen: Mine, navigationOptions: { tabBarLabel: ‘我的‘, tabBarIcon: ({tintColor, focused}) => ( <Image source={focused ? require(‘./main_tab_user_icon_pressed.png‘) : require(‘./main_tab_user_icon.png‘)} style={[{height: 24, width: 24}]}/> ), } }, }, { activeColor: ‘#45C018‘, inactiveColor: ‘#111111‘, shifting: false, barStyle: { backgroundColor: ‘#fff‘, } }); export default createAppContainer(TabNavigator);
本博客地址： wukong1688
本文原文地址：https://www.cnblogs.com/wukong1688/p/10819708.html
转载请注明出处！谢谢~~
[RN] React Native 下实现底部标签（不支持滑动切换）
原文：https://www.cnblogs.com/wukong1688/p/10819708.html