一.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 <Button>Start</Button>;
}
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';