2019-02-27 15:21:09 weixin_44557421 阅读数 1239
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    482 人正在学习 去看看 钱兴岗

RN使用react-native-image-picker + aliyun-oss-react-native 上传图片


今天记录一下在RN使用react-native-image-picker以及aliyun-oss-react-native完成上传图片

如果是原生和RN混合开发,首先执行以下代码:

yarn add react-native-image-picker
yarn add aliyun-oss-react-native

然后在Android添加依赖:
1.在android/settings.gradle里增加代码:

include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')

include ':aliyun-oss-react-native'
project(':aliyun-oss-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/aliyun-oss-react-native/android')

2.在android/app/build.gradle里增加代码:

dependencies {
+		compile project(':react-native-image-picker')
+		compile project(':aliyun-oss-react-native')
}

3.在android/app/src/main/java/…/MainApplication.java里增加代码

package com.myapp;

+ import com.imagepicker.ImagePickerPackage;
+ import com.reactlibrary.RNAliyunOssPackage;

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
+           new ImagePickerPackage()
+ 			new RNAliyunOssPackage()
        );
    }

}

RN页面代码:

import React,{ PureComponent } from 'react';
import { View, StyleSheet } from 'react-native';
import { ImagePicker } from 'antd-mobile';

const RNImagePicker = require('react-native-image-picker');


export default class Demo extends PureComponent {

  state = {
      files: [],
  };
    
  uploadImage = () => {
    const { files } = this.state;
    RNImagePicker.showImagePicker(options, response => {
      console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled photo picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        this.props.dispatch({
          type: 'demo/uploadOssFiles',
          payload: [{ ...response }],
          callback: (res = '') => {
            console.log(res, '@@@');
            this.setState({
              files: [...files, { ...response, url: response.uri }],
            });
          },
        });
      }
    });
  };

  render() {
    return (
      <View style={styles.scrollView}>
	   	  <ImagePicker 
	   	  	multiple 
	   	  	files={files} 
	   	  	onAddImageClick={this.uploadImage}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    height: '100%',
  },
});

modal层代码:

    // 图片上传
    *uploadOssFiles({ payload, callback }) {
      const proArr = payload.map(async subitem => {
      	//payload对象是array数组,首先需要遍历出来
        const fileUri = ossupload(subitem);
        return fileUri;
      });
      // 用Promise等待fileUri返回值
      const data = yield Promise.all(proArr, ret => ret);
      callback && callback(data);
    },

上传方法:

import moment from 'moment';
import AliyunOSS from 'aliyun-oss-react-native';

const endPoint = 'oss-cn-hangzhou.aliyuncs.com';
const configuration = {
  maxRetryCount: 3,
  timeoutIntervalForRequest: 30,
  timeoutIntervalForResource: 24 * 60 * 60,
};

const bucketname = 'myBucketname';
const urlCdn = 'https://myCDN.cn/';

//根据AliyunOss配置AccessKey
AliyunOSS.initWithPlainTextAccessKey('xxxxxx', 'xxxxxx', endPoint, configuration);

export const uploadOssFile = filepath => {
  const filetype = filepath.substring(filepath.lastIndexOf('.')).toLowerCase();
  //获取图片后缀

  const currm = moment(new Date());
  const oo = Math.random();
  const objectKey = `upload/assets/${currm.format('YYYYMM')}/${currm}${oo}${filetype}`;
  // 生成objectKey,作为自定义路径
  return AliyunOSS.asyncUpload(bucketname, objectKey, filepath)
    .then(() => {
      return `${urlCdn}${objectKey}`;
    })
    .catch(error => {
      console.log('=== error', error);
    });
};

AliyunOSS的具体配置请看这里

react-native-image-picker导入有问题的看这里

本文只记录一下个人的使用案例,不具有代表性 ?

2018-09-15 09:18:20 u010389309 阅读数 434
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    482 人正在学习 去看看 钱兴岗

React-Native开发中的坑点实录

从移动开发的角度来说,iOS和Android都有自己的一些UI特性,所以react-native宣称的写一套代码就可以通用就是骗人的鬼话,实际开发中,你会发现很多控件在iOS和Android上展示的效果不一样,或者有些属性支持iOS不支持Android。react-native早期是只支持iOS的,后来才支持的Android,所以直到现在react-native对iOS平台的支持还是比Android平台要友好。

UI方面

  • 1.textinput组件默认会在输入框中加一条线,很难看,实际开发中,需要设置underlineColorAndroid='transparent'属性,去掉Android系统下默认的线。

  • 2.由于iOS和android平台自己的特性,导致同一个组件在iOS上能达到设计的UI效果,在android上有可能达不到效果,这种情况就需要使用import {组件原名 as 别名} from ‘组件来源’,引入同名的第三方组件,针对不同的平台进行UI的效果展示。

  • 3.react-native对iOS支持了阴影效果,Android没有,这种情况下,只能找第三方组件进行支持,或者采用切图的方式进行支持。

  • 4.要实现毛玻璃效果,网上查了好多资料,都推荐react-native-blur这个库,但是这个库也是对iOS支持的很好,对Android就不是那么友好。iOS端的支持组件嵌套的方式,而且不需要设置image的ref,就可以实现毛玻璃效果,而且毛玻璃下层的视图可以动态展示(比如轮播图);Android的则不行,不能采用组件嵌套的方式,而且一定要设置图片的ref,换言之,就是只支持对一张静态图做毛玻璃效果。

  • 5.对于键盘遮挡的处理,iOS和Android触发的事件不一样,所以需要针对不同的平台进行单独的处理。

  • 6.当前组件的状态的更新的时候,使用setstate()更新的时候,会导致原本应该显示的Toast提示,不能显示,这个时候应该在Toast显示方法的回调中进行state的刷新。

方法支持的差异

实际开发的过程中,会发现有一些方法,针对iOS有效果,Android平台上,运行结果却不一样,这种情况下,要么再找一个两端都支持的,要么就是针对不同的平台用不同的方法。

  • 1.startWith()判断字符串的前缀的,实际开发中的,发现在iOS平台运行结果正确,Android运算结果不正确,打印数据,发现数据是正确的。于是就发现了startWith()对于android的http链接判断不起作用,改用indexOf()这个包含字符串的方法后,两端的运行结果都正确了。

  • 2.对于空格的删除,在实际开发中,需要对用户输入账号和密码时,输入的空格进行删除。实际操作的时候发现,Android平台下,无论你连续输入多少个空格,只要用户停下输入,使用正则表达式过滤字符串中的空格就能生效,实现删除空格的效果;iOS平台却只能删除一个空格,如果你连续输入多个空格,中间会出现一个点,多余的空格,正则表达式也不起效果。这一点打了iOS的脸啦

redux框架的坑

redux框架采用状态判断的形式进行业务逻辑的处理。实际开发的工程中,一定要保证业务逻辑判断的状态不能有相同的情况,否则很出现一些灵异的bug。我在开发登录&注册流程时,当时因为是不同的页面,用的状态的判断是一样的(注册时的输入验证码和忘记密码时的输入验证码,跳转逻辑一样)。由于redux的AppState状态是全局的,而且注册到忘记这条线,走的是push页面的方式。忘记密码的时候,出现了push两次输入密码框页面的情况,找了好久,通过打印页面的跳转方式,才从这个坑,从里面爬出来。

这个bug出现的原因是对redux这种全局状态机制不了解,没有把已经入栈页面的状态判断方法屏蔽掉,导致后面走忘记密码的时候,注册页面的跳转密码框的状态满足的情况下,也进行了跳转。

总结

使用react-native进行开发,你一定要做好随时遇到坑的准备,时刻准备着去填坑。react-native开发的路很漫长,过了这山还有那山。

2017-10-10 10:53:18 qq_22063697 阅读数 989
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    482 人正在学习 去看看 钱兴岗

一、初识React-Native

对于初学者常见的困惑是弄不清React、React.js、React-Native这三者之间的关系,有必要先说明一下:React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发网页或移动应用。在它之上发展出了React.js框架来开发网页,发展出来React-Native用来开发移动应用。废话不多说,直接开始吧。

二、开发环境搭建

需要安装的工具:

Node.js

React-Native Command Line Tools

Android Studio(android)/XCode(ios)

现在先搭建在windows平台上的React-Native开发环境

1、安装Node.js

React-Native开发需要用到Node.js环境,安装Node.js有两种常见的方式:

a、一种方式是通过windows包管理工具Chocolatey来安装

这种方式需要安装Chocolatey客户端及PowerShell v3+方式有些繁琐。

b、另一种方式是直接下载Node.js安装包来进行安装

这种方式操作简便。

那我们就来介绍第二种方式吧。

下载地址:https://nodejs.org/en/download/,根据系统下载相应的安装器。如果打开比较慢的话,大家也可以去这个翻译的中文网下载:http://nodejs.cn/download/

这里写图片描述

然后双击下载好的 .msi 文件安装即可。安装完成后,打开终端输入 npm -v 即可查看刚才Node.js是否安装成功。

这里写图片描述

2、安装React-Native命令行工具

Node.js安装成功之后,接下来我们可以通过 npm install 来安装React-Native命令行工具。当然我这里是安装好的。

打开终端,输入以下命令安装:

npm install -g react-native-cli

这里写图片描述

React-Native命令行工具安装完成之后,可以通过 react-native –help 来查看它支持的命令

这里写图片描述

3、安装Android开发工具AndroidStudio

下载地址:https://developer.android.com/studio/index.html#downloads

不是很懂的话,直接下载集成了SDK的AndroidStudio安装即可。当然AndroidStudio需要JDK,大家可以在http://www.oracle.com/technetwork/java/javase/downloads/index.html下载,尽量下载高一点的版本。

然后就是配置环境变量了,这个比较简单我就直接贴图了。

JDK:

这里写图片描述
这里写图片描述

SDK:

这里写图片描述
这里写图片描述

三、创建第一个React-Native应用

初始化React-Native应用,我们可以使用React-Native命令行工具来完成,打开终端输入以下命令:

react-native init <项目名字>
如:
react-native init FirstApp

这里写图片描述

这个过程可能会很慢,因为这个过程npm服务器下载一些RN的依赖包,npm服务器在国外,这时我们可以配置一个npm的淘宝镜像源。找到D:\nodejs\node_modules\npm\npmrc文件,在npmrc文件后面追加

registry= https://registry.npm.taobao.org

这里写图片描述

依赖包下载完成之后,并完成了项目的初始化,初始化完成之后你会下图的输出:

这里写图片描述

然后我们打开FirstApp的根目录会看到如下项目结构:

这里写图片描述

现在我们可以来启动我们的项目了。这里演示启动android,因为在windows平台上没有ios模拟器,启动项目有两种方式:

1、第一种方式,通过命令行工具启动,输入命令:react-native run-android

a、找到刚刚新建的FirstApp项目的根目录,输入以上命令

这里写图片描述

这里可以看到输入以上命令自动会开启另一个终端,这个是JS的服务器即React-Native的包管理器。

编译完成之后会自动安装到连接的设备上

这里写图片描述

这种方式来启动的话会自动帮你端口映射,第二种启动方式就要手动端口映射了。

当然前提是你应该有连接的模拟器或者直接连接真机。查看你连接的设备:adb devices

这里写图片描述

2、第二种方式,通过AndroidStudio启动

a、打开终端,进入FirstApp的根目录,启动JS服务器(命令:react-native start

这里写图片描述

b、端口映射(adb reverse tcp:8081 tcp:8081

这里写图片描述

c、找到FirstApp的android目录打开到AndroidStudio中

这里写图片描述

这里写图片描述

这两种情况实现的效果是这样子的:

这里写图片描述

总结:

1、在项目根目录下运行react-native run-android会在手机上面安装并运行这个apk。然后摇一下手机或者在电脑命令行输入 adb shell input keyevent 82 会在手机上面调出一个开发菜单:

这里写图片描述

点击Reload会重新从开发服务器(也就是你开发用的电脑)获取更新,这样如果你只是更改了项目的js文件的话就不用重新编译即可在手机上面实时观看结果。

2、但是有时候会出现红色屏幕的错误:could not connect to development server这里需要从以下几个步骤来解决问题:

检查开发服务器是否在运行:在电脑上用浏览器输入网址localhost:8081查看是否能访问

检查手机是否已经连上而且开户了USB调试模式adb devices

检查是否忘记忘记运行adb reverse tcp:8081 tcp:8081,这是一个反向代理,用于把手机上localhost:8081的地址映射到电脑上localhost:8081的地址(只能用于Android 5.0以后的版本!!)。如果没有运行这条命令,就运行这条命令之后重新启动开发服务器react-native start(不过运行命令react-native run-android已经包含了adb reverse tcp:8081 tcp:8081这条命令)。

经过以上步骤手机应该能连上电脑了。

2017-02-16 09:31:44 maxleap 阅读数 669
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    482 人正在学习 去看看 钱兴岗

typescriptjavascript的超集,在javascript的基础上添加了可选的静态类型,非常适合团队开,这次我们尝试使用typescript来开发react-native应用。

搭建react-native开发环境

安装yarn和react-native命令行工具

npm install -g yarn react-native-cli

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

React Native目前需要Xcode 7.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具,比如git等。

搭建typescript开发环境

先安装typescript

npm install -g typescript

接下来安装typings
typings是typescript的依赖管理器,如果你使用sublime text或者vscode,会非常方便的补全代码

npm install -g typings

使用react-native命令行工具初始化react-native项目

react-native init ReactNativeApp

等待片刻后,进入刚刚新建的项目,创建一个名为”tsconfig.json” 的文件。tsconfig.json是一个 typescript 项目的配置文件,可以通过读取它来设置 ts 编译器的编译参数
内容如下:

{
    "compilerOptions": {
        "target": "es6",
        "allowJs": true,
        "jsx": "react",
        "outDir": "./dist",
        "sourceMap": true,
        "noImplicitAny": false
    },
    "include": [
        "typings/**/*.d.ts",
        "src/**/*.ts",
        "src/**/*.tsx"
    ],
    "exclude": [
        "node_modules"
    ]
}

在项目下新建一个目录”src”,typescripe源代码就放在这里

现在安装typings依赖

typings install npm~react --save
typings install dt~react-native --globals --save

编写Hello world

在src目录下新建myview.tsx,内容如下

import * as React from "react"
import { Text } from 'react-native';

/**
 * Hello
 */
export default class Hello extends React.Component<null, null>{
    render() {
        return (
            <Text>Hello world!</Text>
        );
    }
}

返回根目录,编译刚刚写好的tsx文件

tsc

修改index.ios.js

import React, { Component } from 'react';
import Hello from './dist/myview';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class ReactNativeApp extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Hello />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

AppRegistry.registerComponent('ReactNativeApp', () => ReactNativeApp);

运行run-ios试试效果

react-native run-ios

运行效果:


作者信息
本文系Maxleap团队_云服务研发成员:xinghaidong 【原创】
MaxLeap博客首发:https://blog.maxleap.cn/archives/125

相关推荐
ReactJS 开发过程中的一些使用心得
使用 React Native 构建类似 Tinder 的加载器
React Native 中的 Android 原生模块
欢迎扫一扫二维码,关注我们的微信订阅号:
图片描述

2017-10-30 18:05:26 qq_27254949 阅读数 1500
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    482 人正在学习 去看看 钱兴岗

开始战斗

从react到react native, 已经走过许多时间。react native是一个高性能的用javascript开发app的框架。
正好准备学一点react,然后觉得不如直接学习react-native,就开始了react-native之路,从环境搭建到一个小DEMO,花了不少时间,主要是下载太麻烦

准备工作

  1. ide: 我选择idea,习惯了
  2. 电脑:win7的i5渣配置,所以先不打算进行ios开发
  3. 没有vpn,宽带是交话费送的10M联通宽带,网速还行1m/s
  4. 推荐给电脑安装wox和everything(wox插件就有),方便寻找文件

环境搭建

node环境

  1. 下载安装nodeJs(最新的就行),为了防止环境变量有问题,不要修改安装目录
  2. 使用 node-v npm -v 看看有没有安装成功
  3. 注册淘宝镜像
> npm config set registry https://registry.npm.taobao.org --global
> npm config set disturl https://npm.taobao.org/dist --global
  1. 下载yarn,react-native默认使用yarn下载
  > npm i -g yarn
  > yarn -v
  1. yarn注册淘宝镜像
> yarn config set registry https://registry.npm.taobao.org --global
> yarn config set disturl https://npm.taobao.org/dist --global 

react-native安装

  1. 使用yarn下载react-native-cli
> yarn global add react-native-cli
> react-native --version
  1. 创建项目,一直等待下载完成,生成的目录还是很清晰的
> yarn-native init rnDemo 

react-目录图

  1. 试着运行项目
> cd rnDemo
> npm start

命令行显示,8081端口开启服务。在浏览器输入localhost:8081,显示React Native packager is running.,说明服务还是通畅的。可咱们要做安卓项目!所以继续使用命令行

> react-native run-android

不出意外会挺慢,因为要下载gradle(gradle是安卓项目常用的构建工具,用来管理jar包和执行任务)和jar包,命令行会提示在此url下载文件Download https://jcenter.bintray.com/com/android/tools/annotations/25.2.3/annotations-25.2.3.jar
4. 因为网络的问题,所以给gradle配置阿里云maven(java常用的包管理工具,有一个下载的仓库,但很慢)镜像。进入.gradle文件夹,一般在C:\Users\Administrator\.gradle,使用wox就简单多了
wox使用图

.gradle 文件夹里面新建 init.gradle 文件,并写入下面代码,或点击下载init.gradle

allprojects{
    repositories {
        def REPOSITORY_URL = 'http://maven.aliyun.com/nexus/content/groups/public/'
        all { ArtifactRepository repo ->
            if(repo instanceof MavenArtifactRepository){
                def url = repo.url.toString()
                if (url.startsWith('https://repo1.maven.org/maven2') || url.startsWith('https://jcenter.bintray.com/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $REPOSITORY_URL."
                    remove repo
                }
            }
        }
        maven {
            url REPOSITORY_URL
        }
    }
}
  1. 继续运行命令react-native run-android
> react-native run-android

可以看到下载速度快了好多,但最后会发现报错SDK location not found,这是因为没有安装 android sdk ,接下来配置 android环境

android开发环境配置

  1. 安装java环境,搜一下有N多教程
  2. 下载android studio 没有翻墙的话推荐使用网盘下载
  3. 安装android studio 推荐使用默认安装一直点击next
  4. 第一次启动会进入下面界面
    androids
    • standard 标准配置,推荐第一次安装使用能够
    • custom 选择安装, 可以自己定制安装选项
      由于是第一此安装就直接选用默认的standard安装,但是react-native官网推荐custom
  5. 记得勾选Android Virtual Device,一直next,最后点击finished等待下载完成
    avd

环境变量

在电脑环境变量设置里面,点击新建,ANDROID_HOME sdk路径
ANDROID_HOME
然后再到环境变量 path 里面添加类似这样
C:\Users\Administrator\AppData\Local\Android\Sdk\tools
C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools
一定注意路径的正确性
tools

再次运行

  1. 运行react-native run-android
> react-native run-android

又提示报错关于 [Android SDK Platform 23, Android SDK Build-Tools 23.0.1]., 这是由于少了build-tools 23.0.1, 在sdk manager里面安装就行了
snap3555
snap3556
点击finished

  1. 运行react-native run-android
> react-native run-android

提示报错com.android.builder.testing.api.DeviceException: No connected devices!, 由于没连上设备导致的错误

连接设备

adb(连接devices的驱动)可以通过模拟器和真机进行,android studio带的模拟器不怎么好用,所以我选择用强大的genymotion进行开发

下载genymotion免费版并启动

  1. 下载并安装genymotion免费版,替换安装目录文件就免费了
  2. 由于genymotion依赖virtualbox,下载安装virtualbox就行了
  3. 以上安装好之后打开genymotion,根据提示添加一个设备并运行该安卓模拟器
    gen
  4. 安装完毕,选择一个添加好的虚拟机,并启动。 糟糕,不知什么原因报错了。
    err
    碰到这种报错不用怕,打开virtualBox,直接启动安装好的虚拟机。
    verr
    可以看出来是virtualBox的配置有错误,那就打开配置信息
    configerr
    跟随黄色提示配置好virtualBox,继续启动在genymotion里面添加的设备,完美!
    success
  5. 在genymotion里面配置sdk路径
    sdk
  6. 如果还是提示连接不上设备,就用adb连接一下
> adb devices
> adb connect 127.0.0.1
> adb devices

开始开发

  1. 各种配置都设置好了,继续运行react-native run-android
  2. 尼玛又是error,这次明显的看出提示没有连接上js Service,得手动连接了
    netErr
    点击菜单 -> Dev Setting -> Debug server host
    dev
    host
    然后返回,reload一下
    reload
    出现成功界面,可以愉快的开发了
    devSuccess
    注意:在菜单里面点击 Enable Hot Reloading,这样就可以保存后实时刷新了

正式开发,就写一个简单的底部导航路由

用到底部导航package react-native-tab-navigator

> yarn add react-native-tab-navigator

修改index.android.js,给入口少搁点东西,不然看着恶心

import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';

import RootApp from './app/RootApp'

AppRegistry.registerComponent('rnDemo', () => RootApp); // rnDemo是项目的名称

在根目录新建文件夹app,在app里面新建 RootApp.js、components/Home.js、components/Nice.js

app/RootApp.js

import React, {Component} from 'react'
import {
  View,
  StyleSheet
} from 'react-native'
import TabNavigator from 'react-native-tab-navigator'
import Home from './components/Home'
import Nice from './components/Nice'
import TabNavigatorItem from "react-native-tab-navigator/TabNavigatorItem";

export default class RootApp extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: 'home'
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <TabNavigator>
          <TabNavigatorItem
            title="Home"
            onPress={() => this.setState({selectedTab: 'home'})}
            selected={this.state.selectedTab === 'home'}>
            <Home/>
          </TabNavigatorItem>
          <TabNavigatorItem
            title="Nice"
            onPress={() => this.setState({selectedTab: 'nice'})}
            selected={this.state.selectedTab === 'nice'}>
            <Nice/>
          </TabNavigatorItem>
        </TabNavigator>
      </View>
    )
  }
}

let styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ccc'
  }
});

app/components/Home.js

import React, {Component} from 'react'
import {
  Text
} from 'react-native'

export default class Home extends Component {
  render() {
    return (
      <Text>
        我是Home
      </Text>
    )
  }
}

app/components/Nice.js

import React, {Component} from 'react'
import {
  Text
} from 'react-native'

export default class Nice extends Component {
  render() {
    return (
      <Text>
        我是Nice
      </Text>
    )
  }
}

大功告成
bigSuccess

react-native入门

阅读数 86

React-native是什么?

阅读数 417

没有更多推荐了,返回首页