一.a(chǎn)nd-mobile
(一).安裝步驟
yarn add antd-mobile
yarn add babel-plugin-import
在你的項(xiàng)目目錄下找到稠茂。.babelrc文件柠偶,把括號(hào)里面的內(nèi)容( ?"plugins": [["import", { "libraryName": "antd-mobile" }]],)配置好
{
??"plugins": [["import", { "libraryName": "antd-mobile" }]],
??"presets": ["react-native"]
}
注:Menu/NavBar/Range?組件暫無(wú) 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 項(xiàng)目將?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不顯示修復(fù):
參考:http://www.reibang.com/p/6fa9482695bf
三.React native集成redux
1. 安裝
安裝redux:npm install --save redux
安裝redux綁定庫(kù):npm install --save react-redux
安裝開(kāi)發(fā)者工具:npm install --save-dev redux-devtools
安裝異步action構(gòu)造器:npm install --save redux-thunk
目錄結(jié)構(gòu):
1.入口文件:
Container诱担,拼裝組件,里面定義了store:維護(hù)全局的state电爹,以及將action和reducer結(jié)合起來(lái)蔫仙。
2.?Actions
Fetch是reactnative提供的用與請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)的方法
Fetch還有可選的第二個(gè)參數(shù),可以用來(lái)定制HTTP請(qǐng)求一些參數(shù)丐箩。你可以指定header參數(shù)摇邦,或是指定使用POST方法恤煞,又或是提交數(shù)據(jù)等等:
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導(dǎo)航
1. 安裝
A.Install with NPM?#
npm install --save react-navigation
B.Install with Yarn?
yarn add react-navigation
2.使用
import?{ StackNavigator?} from?'react-navigation';