react native创建项目及传值

1. 项目创建与启动

1. 安装react-native脚手架

npm install react-native-cli -g

2. 创建项目

react-native init app_name --version 0.59.8

选择 0.59.8 这个版本是为了兼容后面需要用到的echarts等组件。

3. 启动项目

react-native start

当出现以下截图，说明启动完成

4. 连接移动设备（虚拟器，或者打开开发这模式的真机，这里演示的是真机）

   打开手机开发者模式的方法，自己百度一下，不同手机不一样

• 连接模拟器（雷电、逍遥）

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 图标库安装

1. 安装

// 安装
npm install react-native-elements react-native-vector-icons --save
// 链接
react-native link

2. 配置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"

3. 使用（简单提一点）
   图标库链接，点击跳转

import { Icon } from "react-native-elements";
// 默认MaterialIcons
import { IconIcons } from "react-native-vector-icons/[type类型，默认是MaterialIcons]";

2.3 native-echarts 图表组件安装

1. 安装

   npm install native-echarts --save
   

2. 安装完成后，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 选择联动组件安装

1. 安装

   //安装
   npm install react-native-picker
   //连接
   react-native link react-native-picker
   

3.react-native 页面之间的相互传值

• 切换路由方法：

1. this.props.navigation.goBack() 返回上一层
2. this.props.navigation.popToTop() 返回堆栈最顶层
3. this.props.navigation.push(‘Details’) 继续往下推送新的路由，相当于子页面的子页面
4. 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;

接下来带参数传递

1. 父页面传给子页面

<TouchableOpacity onpress={
    ()=>{
        this.props.navigation.navigate('B',{
            data:'我是父页面传给子页面的数据',
        })
    }
}>

2. 子页面接收参数

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);
        })
}