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 tcp:端口号(各虚拟器不同)
- 连接真机(数据线连接电脑与手机)
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 UI 库和 react-native-vector-icons 图标库安装
- 安装
// 安装
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
- 安装完成后,IOS 是可以正常打包并显示的,在 android 端需要进一步处理.在 node_modules 下生成 native-echarts 文件夹,路径: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' }}
- 同时将 tpl.html 文件拷贝到
android/app/src/main/assets
文件夹中,如果 assets 文件夹不存在则新建
2.4react-native-picker 选择联动组件安装
- 安装
//安装 npm install react-native-picker //连接 react-native link react-native-picker
3.react-native 页面之间的相互传值
- 切换路由方法:
this.props.navigation.goBack()
返回上一层this.props.navigation.popToTop()
返回堆栈最顶层this.props.navigation.push(‘Details’)
继续往下推送新的路由,相当于子页面的子页面this.props.navigation.navigate(‘Details’)
将新路由推送到导航器中,如果没有在导航器中,则跳转到该页
- 跳转前页面(父页面)
import {Component} from "react";
import {
Text,AlertStatic as Alert,
TouchableOpacity,
View,
DeviceEventEmitter
} from "react-native";
import {createStackNavigator} from "react-navigation";
import B from '../B.js';
calss A extends Component {
render(){
return(
<View>
<TouchableOpacity onpress={
()=>{
this.props.navigation.navigate('B')
}
}>
<Text>点击跳转</Text>
</TouchableOpacity>
</View>
)
}
}
const HomeScreen = createStackNavigator({
Home: {screen: A},
Details: {screen: B},
});
module.exports = A;
- 子页面
import { Component } from "react";
import { Text, TouchableOpacity, View, DeviceEventEmitter } from "react-native";
class B extends Component {
render() {
return (
<View>
<TouchableOpacity
onpress={() => {
this.props.navigation.goBack();
}}
>
<Text>点击返回</Text>
</TouchableOpacity>
</View>
);
}
}
module.exports = B;
接下来带参数传递
- 父页面传给子页面
<TouchableOpacity onpress={
()=>{
this.props.navigation.navigate('B',{
data:'我是父页面传给子页面的数据',
})
}
}>
- 子页面接收参数
constructor(props){
super(props);
const {navigation} = this.props;
const data = navigation.getParam("data");
this.state = {
data
}
}
子页面带参数返回页面
- 方法一
- 子页面传递参数
<TouchableOpacity
onpress={() => {
this.props.navigation.state.params.callBack({
data: "我是还给原页面的数据"
});
this.props.navigation.goBack();
}}
>
<Text>点击返回</Text>
</TouchableOpacity>
- 父页面接收参数
<TouchableOpacity onpress={
()=>{
this.props.navigation.navigate('B',{
data:'我是父页面传给子页面的数据',
callBack:(params) =>{
Alert(params); // 父页面接收到返回的数据
}
})
}
}>
- 方法二:添加一个监听器 DeviceEventEmitter
- 子页面
TouchableOpacity onpress={
()=>{
DeviceEventEmitter.emit('returnData',params);
this.props.navigation.goBack();
}
}>
<Text>点击返回</Text>
+ 父页面
componentDidMount() {
DeviceEventEmitter.addListener("returnData", (params) => {
Alert(params);
})
}