react native 使用antd-mobile，echarts，以及其原生组件

一．and-mobile

（一）.安装步骤

yarn add antd-mobile

yarn add babel-plugin-import

在你的项目目录下找到。.babelrc文件，把括号里面的内容(  "plugins": [["import", { "libraryName": "antd-mobile" }]],)配置好

{

  "plugins": [["import", { "libraryName": "antd-mobile" }]],

  "presets": ["react-native"]

}

注：Menu/NavBar/Range 组件暂无 React Native 版本

（二）.使用步骤

1.引入

import { Button } from 'antd-mobile';

2.使用

render() {

    return Start;

}

Icon使用：

下载 https://at.alicdn.com/t/font_r5u29ls31bgldi.ttf 重命名为 anticon.ttf

Android 项目将 anticon.ttf 放在 android/app/src/main/assets/fonts/ 目录下;

二．Native-echarts

1.install

npm install native-echarts --savev

2. 用法

用法完全和echarts一致，将echarts的option传给组件

import Echarts from 'native-echarts';

export default class app extends Component {

  render() {

    const option = {

      title: {

          text: 'ECharts入门示例'

      },

      tooltip: {},

      legend: {

          data:['销量']

      },

      xAxis: {

          data: ["衬衫","羊毛衫","雪纺衫","裤子"]

      },

      yAxis: {},

      series: [{

          name: '销量',

          type: 'bar',

          data: [5, 20, 36, 10, 10, 20]

      }]

    };

    return (

      <Echarts option={option} height={300} />

    );

  }

}

安卓打包apk，echart不显示修复：

参考：http://www.jianshu.com/p/6fa9482695bf

三．React native集成redux

1. 安装

安装redux:npm install --save redux

安装redux绑定库:npm install --save react-redux

安装开发者工具:npm install --save-dev redux-devtools

安装异步action构造器:npm install --save redux-thunk

目录结构：

1.入口文件：

Container，拼装组件，里面定义了store:维护全局的state，以及将action和reducer结合起来。

2. Actions

Fetch是reactnative提供的用与请求网络数据的方法

Fetch还有可选的第二个参数，可以用来定制HTTP请求一些参数。你可以指定header参数，或是指定使用POST方法，又或是提交数据等等：

fetch('https://mywebsite.com/endpoint/', {

  method: 'POST',

  headers: {

    'Accept': 'application/json',

    'Content-Type': 'application/json',

  },

  body: JSON.stringify({

    firstParam: 'yourValue',

    secondParam: 'yourOtherValue',

  })

})

3. Reducers

4. components里是视图组件用于展示

四．StackNavigator导航

1. 安装

A.Install with NPM #

npm install --save react-navigation

B.Install with Yarn 

yarn add react-navigation

2.使用

import { StackNavigator } from 'react-navigation';