zoukankan      html  css  js  c++  java
  • react-navigation + react-native-vector-icons

    1.安装

    yarn add react-navigation react-native-vector-icons
    

    2.创建 root.js

    import React, {Component} from 'react';
    import {createStackNavigator} from 'react-navigation'
    import Tab from './scene/Web/ButtomTab'
    import login from './scene/login'
    import Positioning from "./scene/Home/Positioning";
    import Jump from "./scene/Home/Jump";
    
    type Props = {};
    
    export default class root extends Component<Props> {
        render() {
            return (
                <HomeStack/>
            );
        }
    }
    
    const HomeStack = createStackNavigator({
        //底部导航页面
        Homes: {
            screen: Tab,
            navigationOptions: {
                header: null  //顶部导航很多都会自己自定义,这里就为空
            }
        },
        //登录页面
        login: {
            screen: login,
        },
        //定位
        Positioning: {
            screen: Positioning,
            navigationOptions: {
                header: null  //顶部导航很多都会自己自定义,这里就为空
            }
        },
        //测试跳页的页面
        Jump: {
            screen: Jump,
            navigationOptions: {
                title: '选择定位'
            }
    
        }
    }, {
        //默认出现的首页页面
        initialRouteName: 'Homes'
    });
    

    代码中有注释,代表的意思,进入到根后到createStackNavigator,默认输出的家园中到选项卡的底部标签,跳转接着到

    接着上标签里出现到createButtomNavigator导航到代码

    3.创建 底部选项卡

    import React, {Component} from 'react';
    import {
        StyleSheet,
        Dimensions,
        Platform
    } from 'react-native';
    import color from './Color'  //颜色样式
    import Memo from "../Memo/Memo";
    import Ionicons from 'react-native-vector-icons/Ionicons'
    import Statistics from "../Statistics/Statistics";
    import {createBottomTabNavigator} from "react-navigation";
    import Home from "../Home/Home";
    import My from "../My/My"
    
    export default  Tab = createBottomTabNavigator({
        Home: {
            screen: Home,
            navigationOptions: {
                tabBarPosition: 'bottom',
                tabBarLabel: '首页',
                showLabel:false,
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={focused ? 'ios-home' : 'ios-home-outline'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
        Memorandum: {
            screen: Memo,
            navigationOptions: {
                tabBarPosition: 'bottom',
                tabBarLabel: '备忘',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={focused ? 'ios-paper' : 'ios-paper-outline'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
        Statistics: {
            screen: Statistics,
            navigationOptions: {
                tabBarLabel: '统计',
                tabBarPosition: 'bottom',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={focused ? 'ios-stats' : 'ios-stats-outline'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
        My: {
            screen: My,
            navigationOptions: {
                tabBarLabel: '我的',
                tabBarPosition: 'bottom',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={focused ? 'ios-person' : 'ios-person-outline'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
    
    }, {
        tabBarOptions: {
            activeTintColor: color.primary,
            inactiveTintColor: color.gray,
        },
        animationEnabled: true,
        swipeEnabled: false,
        //是否可以滑动切换
        swipeEnabled: true,
        //切换是否有动画
        animationEnabled: true,
        //进入App的首页面
        initialRouteName: 'Home',
        //对于导航的设置
        tabBarOptions: {
            //android特有下划线的颜色1
            indicatorStyle: {height: 0},
            //文字的样式
            labelStyle: {
                fontSize: 10
            },
            //对于导航的stytles
            style :{
                borderTopColor:'#ebebeb',
                borderTopWidth:1,
                backgroundColor:'white',
                height:Dimensions.get('window').height*0.08,
            }
        }
    });
    

    颜色样式

    export default {
        primary: '#1E90FF',  //主题样式 选中底部标题和图片的颜色以及顶部标题
        border: '#e0e0e0',
        paper: '#f3f3f3',
        gray: '#979797', //灰色  未选中底部标题和图片的颜色1
        background:'#F5FCFF',
        white:'#FFFFFF',
        titleBottonSolid: '#979797',
    }
    

    .

  • 相关阅读:
    iOS开发——多线程篇——NSOperation(基于GCD多线程编程),下载图片并合成新图片
    iOS开发——多线程篇——GCD
    iOS开发——多线程篇——NSThread
    iOS开发——多线程篇——多线程介绍
    iOS开发——UI进阶篇(十八)核心动画小例子,转盘(裁剪图片、自定义按钮、旋转)图片折叠、音量震动条、倒影、粒子效果
    推荐系统_七月算法4月机器学习班第9次课程笔记
    STL源码分析读书笔记--第三章--迭代器(iterator)概念与traits编程技法
    C语言基础(不断更新)
    字节对齐总结
    大端模式与小端模式
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9349206.html
Copyright © 2011-2022 走看看