第二天

今天准备搞定导航，希望一切顺利。

导航（路由）

导航组件使用react-navigation,开始配置啦（详细配置信息请看React Navigation的集成及使用）。

第一步当然是安装react-navigation

yarn add react-navigation --save

然后安装一个手势跟踪器react-native-gesture-handler,这个组件的优势是它在UI线程中识别和跟踪手势(更多关于这个组件的信息请看react-native-gesture-handler 使用)

yarn add react-native-gesture-handler --save

原生依赖link

react-native link react-native-gesture-handler

今天在写导航的时候真是被ANDROID STUDIO带的模拟器搞死了，可能我的本子带不起来，一步一个坎，模拟器一直卡死，无奈之下换了夜游神。我不知道是不是只有我，或者只有少部分人遇到这样的问题。换夜游神之前，我还尝试了很多让官方模拟器不死机的方式，比如什么重启adb。但是没有效果。终于，夜游神再让我电脑没有变成PPT的情况下让我看到了效果。感谢夜游神。

在今天突如其来的幸福之后，我开始开发导航功能

规划文件夹，在根目录创建src/navigation文件夹，创建index.js文件，这个文件中是路由的配置文件。需要注意的是，react-navigation 4.X的 createStackNavigator 和 createBottomTabNavigator分别移到了 react-navigation-stack和react-navigation-tabs中，然后还需要一个包react-native-reanimated 正常安装就可以。

// navigation/index.js
import {createAppContainer } from 'react-navigation'
import {createStackNavigator} from 'react-navigation-stack'

//TEST 导航configs
import TestOne from '../views/testOne'
import TestTwo from '../views/testTwo'

const navigationConfigs = createStackNavigator({
    TestOne: {
        screen: TestOne
    },
    TestTwo: {
        screen: TestTwo
    }
})

export default createAppContainer(navigationConfigs)

然后在app.js中引用

import React, { Component } from 'react';
import Navigation from './src/navigation'

export default class HomePage extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return <Navigation />
  }
}

然后就可以在模拟器中看见TestOne页面了。

下一步就是自己的需求了，我需要底部导航栏，有4个功能,创建```src/navigation/tab.js

import { StyleSheet, Image } from 'react-native'
import { TabBarBottom } from 'react-navigation'
import { createBottomTabNavigator } from "react-navigation-tabs";
// 首屏 底部tab 导航configs
import Home from '../views/Home'
import News from '../views/News'
import Serve from '../views/Serve'
import My from '../views/My'

export default createBottomTabNavigator(
    {
        home: {
            screen: Home,
            navigationOptions: () => ({
                // tab文字
                tabBarLabel: '首页',
                // tab图标
                tabBarIcon: ({ focused }) => {
                    let icon = require('../assets/img/home.png')
                    if (focused) {
                        icon = require('../assets/img/home_active.png')
                    }
                    return <Image style={styles.icon} source={icon} />
                }
            })
        },
        news: {
            screen: News,
            navigationOptions: () => ({
                tabBarLabel: '资讯',
                tabBarIcon: ({ focused }) => {
                    let icon = require('../assets/img/news.png')
                    if (focused) {
                        icon = require('../assets/img/news_active.png')
                    }
                    return <Image style={styles.icon} source={icon} />
                }
            })
        },
        serve: {
            screen: Serve,
            navigationOptions: () => ({
                tabBarLabel: '服务',
                tabBarIcon: ({focused}) => {
                    let icon = require('../assets/img/serve.png')
                    if (focused) {
                        icon = require('../assets/img/serve_active.png')
                    }
                    return <Image style={styles.icon} source={icon} />
                }
            })
        },
        my: {
            screen: My,
            navigationOptions: () => ({
                tabBarLabel: '我的',
                tabBarIcon: ({focused}) => {
                    let icon = require('../assets/img/my.png')
                    if (focused) {
                        icon = require('../assets/img/my_active.png')
                    }
                    return <Image style={styles.icon} source={icon} />
                }
            })
        }
    },
    {
        //首次加载时 展示的页面
        initialRouteName: 'home',
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',
        tabBarOptions: {
            //当前选中的tab的文本颜色和图标颜色
            activeTintColor: '#000',
            //当前选中tab的背景颜色
            activeBackgroundColor: "#f5f5f5",
            //当前未选中的tab bar的文本颜色和图标颜色
            inactiveTintColor: '#666',
            //当前未选中tab的背景颜色
            // inactiveBackgroundColor: "#fff",
            //是否显示tab的文字
            showLabel: true,
            // 是否显示tab的图标
            showIcon: true,
            //tab bar的样式
            style: {},
            //tab的样式对象。
            tabStyle: {
                // backgroundColor: '#000',
                // borderTopColor: '#ccc',
            }
        },
        //是否在切换tab页时使用动画
        animationEnabled: true,
        //是否允许滑动切换tab页
        swipeEnabled: true,
        //是否懒加载
        lazy: true,
    })

const styles = StyleSheet.create({
    icon: {
        width: 30,
        height: 30
    }
})

爱思考的同学，可能想把图表展示部分的代码提出来，但是require是不可以使用变量的，它是编译时而不是运行时，所以只能按部就班的写。

今天又结束了

这两天收获甚微，效率低下。我觉得是官方模拟器在我电脑上的性能让我寸步难行。明天还是会继续的，明天争取上午搞定redux，下午弄清楚fetch。

我一定能搞定，qtnnd靡不有初，鲜克有终。

REACT-NATIVE小白日记（二）

第二天

导航（路由）

今天又结束了