新建一个react-native项目（移动端）

1. 项目创建与启动

安装react-native脚手架

npm install react-native-cli -g

创建项目

react-native init app_name --version 0.59.8

选择 0.59.8 这个版本是为了兼容后面需要用到的echarts等组件。

启动项目

react-native start

当出现以下截图，说明启动完成

启动完毕

连接移动设备（虚拟器，或者打开开发这模式的真机，这里演示的是真机）

打开手机开发者模式的方法，自己百度一下，不同手机不一样

连接模拟器（雷电、逍遥）

adb connect 127.0.0.1:7555

连接真机(数据线连接电脑与手机)

adb reverse tcp:8081 tcp:8081

查看连接的设备或者虚拟机

adb devices

如图：

已经连接的设备

接下来愉快地开始移动端的项目，非常愉快！！

2. 安装依赖以及常用的插件

2.1 路由导航

当react-native项目版本低于 0.6 使用以下指定版本，不要问我为什么，心里默默说一句，版本问题是个坑

安装依赖

npm install react-navigation@3.11.1 --save
npm install react-native-gesture-handler@1.3.0 --save

链接

// 自动链接所有
react-native link
// 手动指定链接包
react-native link 包名

使用

import {createAppContainer,createStackNavigation, createBottomTabNavigation } from 'react-navigation'

const BottonTab = createBottomTabNavigation({
  name: {
    screen: Message,
    navigationOptions: {
      ...
    }
  },
  ...
})
// 必须以createAppContainer作为根组件
const App = createAppContainer(BottonTab)
export default App

路由跳转

// 带参与否
this.props.navigation.navigate('name', ?{...})

// 接收参数
this.props.navigation.state.params

2.2 react-native-elements组件安装

安装

// 安装
npm install react-native-elements react-native-vector-icons --save
// 链接
react-native link

配置apply from: ...
在根目录\android\app\build.gradle文件中搜索apply from, 并在后面添加

apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

使用（简单提一点）
图标库链接，点击跳转

import { Icon } from 'react-native-elements'  // 默认MaterialIcons
import { IconIcons } from 'react-native-vector-icons/[type类型，默认是MaterialIcons]'

2.3 native-echarts 图表的安装与配置

安装

// 安装
npm install native-echarts --save

// 链接
react-native link

安装完成后，在node_modules文件夹下生成native-echarts文件夹，如下图

image.png
IOS是可以正常打包并显示的，在android端需要进一步处理：
1. 在node_modules/native-echarts/src/components/Echarts/目录下，
  将index.js中的代码：source={require('./tpl.html')}修改为 source={Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }}
2. 将tpl.html文件拷贝到安卓项目下面的app/src/main/assets文件夹中，如果assets文件夹不存在则新建文件夹

3. 使用

native-echarts的使用方法基本和网页端的Echarts使用方法一致。组件主要有三个属性：

option（object）：图表的相关配置和数据
width（number）：图表的宽度，默认值是外部容器的宽度
height（number）：图表的高度，默认值是400
参考网址

依赖版本示例

"dependencies": {
    "@react-native-community/async-storage": "^1.6.2",
    "native-echarts": "^0.5.0",
    "react": "16.8.3",
    "react-native": "0.59.8",
    "react-native-elements": "^1.2.7",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-picker": "^4.3.7",
    "react-navigation": "^3.11.1"
  },

3. mock的安装与使用

全局安装

npm i @shymean/mock-server -g

配置

项目根目录下新建mock文件夹，底下新建_mock.js文件

快速启动mock服务器

mock -p 9999 -f ./目录路径/_mock.js

-p指定端口号， -f指定模拟数据路径

最后编辑于：2019.11.22 13:52:02