2018-03-20 14:19:35 meiwei_1 阅读数 642
  • 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标签组件的封装。

    479 人正在学习 去看看 钱兴岗
React-Native中文教程
但是我觉得上面的教程有很多没必要的
我现在分享下我搭建的开发环境过程
1、安装Java
安装1.8以上即可,并设置环境变量
win+r 输入cmd 执行

java -version

2、安装Android SDK
选择对应的平台,可同时下载Android Studio
安装方法该网址有详细讲述,这里不再赘述
在设置SDK的环境变量时必须要为ANDROID_HOME,否则会在后面报错,原因我在后面讲解。
3、设置SDK
打开Android SDK Manager。 
选中以下项目: 
Android SDK Build-tools version 23.0.1 
Android 6.0 (API 23) 
Android Support Repository 
Local Maven repository for Support Libraries 

下面是开始正式的RN环境配置了
4、安装node
这货是基于js的,node.js轻量级的Web服务器,想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js.
下载地址:https://nodejs.org/en/

下载推荐版就可以,箭头所示
下载后安装在你指定的路径并记住安装的路径
我的路径D:\Frank_Ghost_Install\Node
安装后打开cmd命令输入
node -v

显示如图所示则代表安装成功(并自动写入环境变量了)
可以使用命令查看
echo %PATH%

5、安装git(也可不需要安装,建议安装)
下载地址https://git-scm.com/downloads
选择对应的版本即可
安装后设置环境变量

变量名设置为

GIT_HOME

路径为你安装git的路径


设置完毕后再cmd命令窗口执行
git --verison

查看版本信息即可
6、安装react-native命令行工具react-native-cli
打开命令行,输入 
npm install -g react-native-cli注意注意:react为小写,如果网络不行的话配置国内镜像如下: 
npm config set registry https://registry.npm.taobao.org 
npm config set disturl https://npm.taobao.org/dist 
这时候在命令行输入react-native命令就可以使用了。 
新建一个目录,如:“D:/react-native/projects”,到这个目录下,打开命令行,输入:react-native init HelloWorld命令,新建一个工程,使用这个配置的可直接跳转到下面的第7步  

或着使用如下步骤下载配置(git配置完成后)
1) 在命令行中进入你希望RN安装的目录
2) 输入git clone https://github.com/facebook/react-native.git,可指定路径clone
(或者  git clone git@github.com:facebook/react-native.git)等待下载 

如没安装git的打开网页或在gihub搜索react-native

下载

下载完后解压可指定路径解压
以上步骤完成后
3) 进入刚刚目录下的react-native目录下的react-native-cli目录,输入npm install -g 


安装好之后,可以命令行下就有react-native命令了
接下来咱们测试一下
在cmd命令窗口输入(这里说明一下所有cmd命令窗口是新开窗口)
react-native -v

7、创建RN项目

进入你希望创建项目的目录后,输入react-native init HelloWorld,(这里HelloWorld为工程名)等待一段时间

运行成功

项目目录结构

7、运行package
然后切换到刚才的工程目录下,cmd命令窗口输入
react-native start


运行完之后

然后在浏览器输入注意老版本(低于0.49)的地址为http://localhost:8081/index.android.bundle?platform=androidhttp://localhost:8081/index.bundle?platform=android,若是能打开看见下面就证明服务器就可以了。 
第一个地址打开是:

第二个的打开是

如果你遇到了ERROR Watcher took too long to load的报错,请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,将其中的MAX_WAIT_TIME 从25000改为更大的值(单位是毫秒)
8、运行项目并调试
连上手机或模拟器(模拟器我使用的Android Emulator),在cmd命令窗口输入
adb devices
查看手机是否确定连上,如果显示有设备则证明已经连上设备。 

如需了解adb命令详解这里不作讲解,可自行百度。
1、如果手机是android5.0及以上的系统,则在cmd命令窗口输入:
adb reverse tcp:8081 tcp:8081

即可连接上服务器调试,随后运行
在HelloWorld目录下执行以下命令
react-native run-android

即可运行在手机或模拟器上。 
运行成功后是如下图

模拟器截图

2、如果是android5.0以下的机器,则先再在工程目录下使用
react-native run-android命令运行工程,随后摇晃手机选择Dev Settings,选择Debug server host & port for device输入ip地址加端口号,如“192.168.0.1:8081”。 

如在执行
react-native run-android命令时报如下错误
FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties f
ile or with an ANDROID_HOME environment variable.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.

BUILD FAILED

Total time: 4.304 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:

本人的出错的原因是上述讲到的sdk环境变量设置的变量名错误
修改为ANDROID_HOME即可
ANDROID_HOME变量名在react-native使用时有引用此变量名,如果不是此变量名则会提示SDK未找到SDK location not found。
至此则环境安装完毕。
如有疑问可询问抑或是百度查看。

如要打离线包可百度搜索

ReactNative - 打离线包


欢迎关注微信号:魅影响

或扫描下方二维码关注


往期推送

1、内存的快捷方式-指针

2、程序员必备知识计算机数据存储(上)

3、Windows下腾讯应用宝认领应用步骤

4、最全Windows下搭建go语言开发环境以及开发IDE





2017-03-01 14:11:49 qq_15103193 阅读数 102
  • 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标签组件的封装。

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

react-native的第一个hello world

1 需要安装nodejs这个环境,直接从网上下载就行

2 安装npm

npm install -g nrm 
nrm use cnpm
3 创建react-native应用
react-native init FirstReactNative

4 启动服务

npm start

5 进入项目的目录,进入Android目录,将与gradle相关的一切都改为自己本地可以运行起来的配置,比run项目,安装到模拟器上

6 按R就可以更新修改的内容

2017-06-21 18:19:09 u010886975 阅读数 2700
  • 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标签组件的封装。

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

技术是进步的,如果你还在为纠结学习Android还是IOS,那么你已经OUT了,这是网友说的。React-Native怎么样我还不知道,只知道要学习这个东西。今天给大家说一说,如何在Windows上搭建React-Native的开发环境。

第一步:如果你是Android开发者,那么你的Android Studio环境一定是没问题的。这一步就是搭好Android Studio环境,直到你能跑起来一个Android工程!网上教程很多!

第二步:安装一个Git工具。链接直达http://blog.csdn.net/itpinpai/article/details/48105445

第三步:安装Node.js。链接直达https://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

第四步:这才是重要的一步,下载React-Native相关工具。
1、在合适的位置创建一个文件夹(这个位置确保不会被删):ReactNative;
2、进入ReactNative文件夹中(此时文件夹是空的,react-native是自动创建的):右键点击Git Bash Here,弹出一个命令窗口!
这里写图片描述

3、在窗口中键入:git clone https://github.com/facebook/react-native.git
这里写图片描述
然后回车键,不要关闭命令框,能看见下载进度,等待这个过程下载完成!

4、完成后,为了能够快速安装react-native相关工具,我们还需要给node.js的包管理器配置一下代理,代理设置如下:
在此命令框内执行以下两句代码:分开执行,这个过程很快

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

5、我们就可以直接安装react-native的包了,首先我们进入刚刚git的下载目录中,即ReactNative\react-native文件夹中,在空白处,鼠标右键—>Git Bash Here,弹出一个命令窗口,键入命令:

npm install -g react-native-cli

这个过程会会有一点点耗时,等待他完成!

6、现在你自己创建一个工作目录,比如ReactNativeWorkSpace文件夹;在此文件夹中调出命令窗口(鼠标右键—>Git Bash Here)键入以下代码:

react-native init MyReactNative

此时系统会创建一个MyReactNative文件夹,命令框中能看到状态,等待这个过程完成!一般几分钟!

7、过程6完成后,在MyReactNative文件夹中调出命令窗口(鼠标右键—>Git Bash Here),键入以下代码:

react-native start

等待这个过程完成(完成标志:出现React packager ready 字样),完成过后,这个命令窗口不要关闭(这个命令窗口就像一个服务,后面的操作要基于此,切记这个命令窗口一直都不要关闭);
这里写图片描述
此时,在你的浏览器输入:http://localhost:8081/index.android.bundle?platform=android

如果出现下图:(图片未截图完整)
这里写图片描述

表明环境已经成功搭建!如果出错,多半的原因是,前面的几条命令,有的未执行完成!就开始执行下一条了!

8、接下来在你的MyReactNative文件夹中调出命令窗口执行以下命令

react-native run-android

接下来要做的事情就是等待了!这个过程取决于你的网速,因为要配置gradle,配置完成后,会安装Apk到你已连接电脑的真机或者是模拟器!这个gradle这个东西,用过Android Studio的都知道,下载慢不说,还容易出错。其实这会在MyReactNative目录中,就有一个Android studio工程,你直接用Android studio 打开它就好了。然后在Android studio里面直接运行。
如果运行结果是一片红:
解决办法一:完成过程7,再安装apk(或者摇一摇手机,点击ReLoad);
解决办法二:在你系统cmd中执行:adb reverse tcp:8081 tcp:8081,再安装apk(或者摇一摇手机,点击ReLoad);
成功你能看到以下界面
这里写图片描述

最后两行是我自己加的。
到此环境就配置好了!

2017-10-08 09:27:03 YQXLLWY 阅读数 1643
  • 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标签组件的封装。

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

其实有时候真的很无语,一大群学生党拿着苹果电脑打游戏,看电影,而我想做ios开发却连苹果电脑都买不起,买了苹果电脑还要去买苹果设备,还是安卓便宜,所以暂时只做安卓开发,等以后涨了工资再来弄苹果,反正都是写代码,原理都一样的.

回到原题.先介绍一下我的小米4配置:

  • MIUI 8.5稳定版
  • Android版本 6.0.1

开启开发者选项

网上搜都是说什么搜索栏搜一下,结果我用搜索栏他硬是都给我显示百度,气的我,所以这里介绍一下怎么手工去开启开发者选项.

  • 设置(别问我设置在哪里)
  • 我的设备(一般在最顶部)
  • 全部参数(别去点最顶部的MIUI版本,没用的)
  • MIUI 版本(点这里的MIUI版本)

狂点就是了,次数到了设备会提示你的,告诉你已经开启了开发者选项,如果失败了,那我说一声Sorry你会原谅我吗?

关闭"MIUI优化"

这个大概是最痛苦的事情,但是不关闭这个的话,小米的系统是不允许你将你的应用通过react-native run-android来安装到手机上的.大概会报下面这样的错误信息:

:app:installDebug FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to establish session

简单来说就是编译成功了,但是安装到小米4上时失败了.网上谷歌来的解决办法就是关闭"MIUI优化".下面介绍关闭的具体操作步骤.

  • 设置
  • 更多设置
  • 开发者选项
  • 启用MIUI优化 (在最底部,耐心找)

将其关闭后会显示一个弹出框,具体内容我忘了,总之点击确定吧,之后小米手机会自动关机重启,这个时候别慌,正常的.重启之后你会发现,手机好像变得怪怪的,总之我是觉得怪怪的,还没有时间去细细研究哪里怪怪的.

开发者选项配置

就是在上面进入开发者选项后,里面有一堆的东西说可以配置,我是连蒙带猜设置的.下面是我开启的配置项:

  • USB调试
  • USB安装
  • 使用旧版DHCP客户端

还有,在下拉菜单中选择USB的那个图标,然后他会让你选择USB的用途,选择传输文件(MTP).我不确定不这样设置有没有问题,但是感觉应该这样设置.

react-native run-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标签组件的封装。

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

开始战斗

从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

阅读数 251

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