reactnative使⽤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 <Button>Start</Button>;
}
Icon使⽤:
Android 项⽬将 f 放在 android/app/src/main/assets/fonts/ ⽬录下;
⼆.Native-echarts
1.install
npm install native-echarts --savev
2. ⽤法
⽤法完全和echarts⼀致,将echarts的option传给组件
import Echarts from
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 (
return
/>
<<Echarts option=={option} height=={300} />
);
reactnativeui框架}
}
安卓打包apk,echart不显⽰修复:
三.React native集成redux 1. 安装
安装redux:npm install --save redux
安装redux绑定库:npm install --save react-redux
安装开发者⼯具:npm install --save-dev redux-devtools
npm install --save redux-thunk 安装异步action构造器:npm install --save redux-thunk 安装异步action构造器:
⽬录结构:
1.⼊⼝⽂件:
Container,拼装组件,⾥⾯定义了store:维护全局的state,以及将action和reducer结合起来。
2. A A ctions
Fetch是reactnative提供的⽤与请求⽹络数据的⽅法
Fetch还有可选的第⼆个参数,可以⽤来定制HTTP请求⼀些参数。你可以指定header参数,或是指定使⽤POST⽅法,⼜或是提交数据等等:fetch('mywebsite/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
3. R R educers
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';
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论