ReactNative学习----2react-navigation实现App的底部菜单

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88565789

官方文档：
https://reactnavigation.org/docs/zh-Hans/2.x/getting-started.html
效果图：

项目结构：

安装模块：
cd 到项目目录下
yarn add [email protected]

源代码：
BottomIndex 配置路由，Home1,Home2,Home3分别是一个页面
BottomIndex 代码：

import React from 'react';
import {Text, View, Image} from 'react-native';
import {StackNavigator, createBottomTabNavigator, createStackNavigator} from 'react-navigation';
import Home1 from './Home1';
import Home2 from './Home2';
import Home3 from "./Home3";


export default createBottomTabNavigator(
    {

        List: {
            screen: Home1,
            navigationOptions: {
                tabBarLabel: '上映',
                tabBarIcon: ({ focused }) => (
                    <Image source={focused ? require('../img/talk_fill.png') : require('../img/talk.png')} style={{width:24,height:24}} />
                ),
            }
        },
        Cinema: {
            screen: Home2,
            navigationOptions: {
                tabBarLabel: '影院',
                tabBarIcon: ({ focused }) => (
                    <Image source={focused ? require('../img/photo_fill.png') : require('../img/photo.png')} style={{width:24,height:24}} />
                ),
            }
        },
        Mine: {
            screen: Home3,
            navigationOptions: {
                tabBarLabel: '我的',
                tabBarIcon: ({ focused }) => (
                    <Image source={focused ? require('../img/mine_fill.png') : require('../img/mine.png')} style={{width:24,height:24}} />
                ),
            }
        },
    },
    {
        tabBarOptions: {
            activeTintColor: '#0078d7',
            inactiveTintColor:'#000000',
            labelStyle: {
                fontSize: 12,
                marginBottom:1,
            },
            style: {
                backgroundColor: '#FFFFF',
            },
            tabBarOptions: {
                showIcon:true,
            }

        }

    }

);

Home1代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';


export default class Home1 extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Home1</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },

});

Home2,Home3和Home1代码一样，这里就不贴了

源码下载：
源码：bkdemo3----bottom

综合应用：17的链接