[RN] React Native 下实现底部标签（不支持滑动切换）

底部标签是现在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: ,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    button: {
        width: ,
        height: ,
        borderRadius: ,
        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: , width: }]}
                />
            ),
        },
    },
    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: , width: }]}
                />
            ),
        },
    },
    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: , width: }]}/>
            ),
        }
    },
    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: , width: }]}/>
            ),
        }
    },
}, {
    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: , width: }]}
                />
            ),
        },
    },
    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: , width: }]}
                />
            ),
        },
    },
    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: , width: }]}/>
            ),
        }
    },
    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: , width: }]}/>
            ),
        }
    },
}, {
    activeColor: '#45C018',
    inactiveColor: '#111111',
    shifting: false,
    barStyle: {
        backgroundColor: '#fff',
    }
});

export default createAppContainer(TabNavigator);

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/10819708.html

转载请注明出处！谢谢~~