• React Native环境搭建及项目生成运行 React官方网址: https://reactnative.cn/ 必须安装的依赖有:Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。 注意 :Node 的版本必须高于 8.3,Python ...

    React Native环境搭建及项目生成运行
    React官方网址:
    https://reactnative.cn/
    必须安装的依赖有:Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。
    注意 :Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。安装完 Node 后建议设置 npm 镜像以加速后面的过程(或使用科学上网工具)。
    注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!
    1.安装Node
    Node安装后会自带npm,Dos下设置国内镜像地址
    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
    安装Yarn(Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。)
    npm install -g yarn react-native-cli
    设置Yarn国内镜像地址
    yarn config set registry https://registry.npm.taobao.org --global
    yarn config set disturl https://npm.taobao.org/dist --global
    2.安装Android Studio(最新版本Android Studio有自带SDK,自己下载SDK也可以。)
    记得勾选Android Virtual Device(目前编译 React Native 应用需要的是Android 8.0 (Oreo)版本的 SDK)
    在这里插入图片描述
    在这里插入图片描述
    记得安装Android Studio和Phyton后要配置环境变量并把%ANDROID _HOME%\platform-tools;%ANDROID _HOME%\tools以及C:\Python27添加到Path环境变量中。(默认Android Studio在C:\Users\Administrator\AppData\Local\Android\Sdk,这里只举个例子):
    在这里插入图片描述
    Dos下进入需要安装的项目文件夹中使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目:
    react-native init AwesomeProject
    等待创建完成后React Native也就差不多完成了,接下来要看如何运行了
    3. 你可以使用 Android Studio 打开项目下的"android"目录,然后可以使用"AVD Manager"来查看可用的虚拟设备,它的图标看起来像下面这样:
    在这里插入图片描述如果你刚刚才安装 Android Studio,那么可能需要先创建一个虚拟设备。点击"Create Virtual Device…",然后选择所需的设备类型并点击"Next"。
    在这里插入图片描述
    在这里插入图片描述

    创建完Android虚拟设备后先运行Android虚拟设备(运行虚拟设备与之前的React Native创建不冲突)
    Dos下进入项目文件夹并执行以下命令
    cd AwesomeProject
    react-native run-android
    注意:由于国内的获取环境封锁,build时候需要的很多包都无法获取到,所以前提是你需要一个比较稳定的能访问外网的网络环境,具体搭建过程可以参考以下链接http://blog.sina.com.cn/s/blog_77209cdd0102xfar.html
    在Android Studio中File->Setting中设置代理Proxy为你本地VPS以便build时候获取更新包。
    用Android Studio打开React Native项目AwesomeProject\android文件夹下的Android文件,然后等待项目自动build下载相应文件(下载时间有点长,需要耐心等待)。
    在这里插入图片描述
    在这里插入图片描述

    下载过程中有时候会出现包下载不到,浏览器中查看提示的包错误链接时候返回404错误确实是包的数据源问题,这时候就不得不更换包的版本或者buildToolsVersion了,最简单的方式就是你先用Android Studio创建一个本地Android应用然后查看相应的Gradle以及Build版本后然后照搬照套。
    在这里插入图片描述
    在这里插入图片描述
    执行命令react-native run-android有的会提示jcenter的错误,这时候可以在gradle中设置生成时候获取包的url

    maven{url ‘http://maven.aliyun.com/nexus/content/groups/public/’}
    在repositories的jcenter()上添加如上maven方法并设置Enable embedded Maven repository
    在这里插入图片描述
    在这里插入图片描述
    最后再try again一次应该就可以build成功了,然后我们就可以继续执行命令react-native run-android了,但是执行后模拟器上出现如下红屏情况,最主要的原因是因为React Native新版本文件名已经从index.android.js变为了index.js(在AwesomeProject项目文件夹中我们能看到index.js文件)
    在这里插入图片描述
    在这里插入图片描述
    1.新建assets:进入\android\app\src\main新建assets文件夹
    2.生成index.android.bundle文件:Dos下进入AwesomeProject项目文件夹下执行如下语句:
    react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
    然后你就可以在项目文件夹AwesomeProject\android\app\src\main\assets下看到index.android.bundle文件了
    3.重新运行react-native run-android
    在这里插入图片描述
    注意:以后每次修改AwesomeProject文件夹下面的文件后都要重新执行以上index.android.bundle生成语句后才能在Android中看到结果
    最后一步要发布自己的.apk文件只要在Android Studio打开的项目中点击菜单栏的Build->Build Bundle(s)/APK(s)->Build APK(S)之后程序就会自动生成.apk文件,在项目文件夹AwesomeProject\android\app\build\outputs\apk\debug中就能看到相应的.apk生成文件
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • React Native简介和环境...今天来介绍如何使用AndroidStudio来运行React-Native项目; 1.AndroidStudio打开RN项目 AndroidStudio 打开或导入项目目录下的andriod目录即可; 2. AndroidStudio配置gradle、sdk、b...

    React Native简介和环境搭建 介绍了环境搭建,已经通过react-native run-android命令来运行项目;

    今天来介绍如何使用AndroidStudio来运行React-Native项目;

    1.AndroidStudio打开RN项目

    AndroidStudio 打开或导入项目目录下的andriod目录即可;

    2. AndroidStudio配置gradle、sdk、build-tools

    RN项目目前默认是gradle 2.2.3 ,sdk使用android 6.0(API 23),build-tools版本为23.0.1

    3. 打开React-native服务

    通过dos进入到项目目录,eg:F:\AndroidStudio\ReactNative\RNApp

    执行以下命令:

    react-native start

    显示结果:

    否则会出现错误:

     AndroidStuio运行RN项目:Could not connect to development server.: Exception in native call

    4. 运行项目

    运行项目显示结果:

     

    展开全文
  • 学习react-native就跟当初学习android一样,环境搭建完毕,代码也不知道怎么写,如果也没有demo运行一下看看这是个什么东西,总觉得RN很神秘复杂的样子。FaceBook官方早已经给我们准备了很好的学习资料,就是github...

    学习react-native就跟当初学习android一样,环境搭建完毕,代码也不知道怎么写,如果也没有demo运行一下看看这是个什么东西,总觉得RN很神秘复杂的样子。FaceBook官方早已经给我们准备了很好的学习资料,就是github上的官方demo,那如何跑到模拟器上,官方的介绍是相当简洁,但既然是官方的,那就按照人家说的试着做吧,同样作为初学者的我,耗费了两天时间才把这个demo运行到模拟器上,遇到问题无数,现把步骤做一下整理,希望对童鞋们有所帮助。

    (一) 前提条件

    确保你已经安装了react-native的运行环境(包括Node.js,Python,Android SDK,AndroidStudio2.0以上,NDK,等等),如果没有装,请看这里

    (二) clone 代码

    通过git工具,从github把代码clone到本地,执行命令:
    git clone https://github.com/facebook/react-native.git
    代码很多:
    项目代码截图

    (三) 安装cygwin

    这个软件我也没用过,它是一个能在windows平台上运行的类UNIX模拟环境,因为要执行一些shell命令,windows不支持,所以要安装这个软件。先到官网下载,根据自己电脑选择32位/64位的,下载完之后,开始安装:基本都是默认,点击“下一步”,
    这里写图片描述

    安装路径也是默认就行:

    这里写图片描述

    一直“下一步”,直到这里,选择下面这个url:

    这里写图片描述

    这里需要选择要安装的组件:gcc、gcc-mingw、binutils、gdb,这四个是必须的:

    这里写图片描述

    选好组件之后,开始安装,我把4个组件全选了,安装的很慢
    安装成功之后,配置环境变量:C:\cygwin64\bin(根据自己的安装路径而定,这个是默认的)

    这里写图片描述

    测试是否安装成功,打开cmd命令行窗口,输入bash,回车

    这里写图片描述

    这样就是成功安装而且配置好了。

    (三) Android NDK

    编译react-native需要用到NDK,如果已经你已经安装且配置过了“ANDROID_NDK”环境变量,这一步就过了,如果没安装的话,点击这里,(准备好VPN),然后配置“ANDROID_NDK”环境变量
    这里写图片描述

    (四)添加项目依赖 node_modules

    环境备好之后开始编译刚才clone到本地的项目

    4.1

    添加Node依赖模块,该命令行需要切到react-native项目根目录下,执行命令:

    npm install

    这里写图片描述

    这个可能执行很久,耐心等待,执行成功大致是这个界面,就是下载了一堆项目依赖文件

    这里写图片描述

    (五)编译项目

    这里也是我碰到错误最多的地方,前面几步几乎不会出现问题,好了按正常步骤开始执行。
    打开刚才安装的cygwin,桌面上有快捷方式,进入到项目根目录下

    这里写图片描述

    执行命令(需要打开你的android模拟器)

    ./gradlew :Examples:UIExplorer:android:app:installDebug

    这个项目里包含了好几个demo, UIExplorer 只是其中一个demo的名称,可以自行进入项目实际目录查看,运行其他demo只需切换项目名称即可。
    这一步会执行很久,先看一下执行正常的界面:

    这里写图片描述

    我的用时是17秒,因为之前我已经编译过一次了,执行成功,紧接着,输入

    ./packager/packager.sh

    这里写图片描述

    打包成功!可以在模拟器上看到react-native这个app

    这里写图片描述

    太开心了,迫不及待地点开看看

    这里写图片描述

    当然了,这是没有出问题的情况,这个命令 ./gradlew :Examples:UIExplorer:android:app:installDebug
    会出现诸多问题,我碰到的就是执行task downloadBoost这个下载任务失败,这个任务下载的react-native项目启动时的一些文件,都是C++的代码文件,如果不能自动下载的话,那就手动来吧,打开react-native\ReactAndroid目录,下面有个build.gradle,很熟悉吧~~~,找到30多行的位置,就可以看到这个
    task downloadBoost任务了,

    这里写图片描述

    把这个url复制一下,放到浏览器地址栏,可以直接下载这个boost压缩文件,大概100多M,下载完成之后,放到这里

    这里写图片描述

    如果没有的话,自己造一个目录就行。仅仅放到这里还不行,最关键的一步就是,设置到环境变量,让react-native编译的时候能自动找到它,我们可以在build.gradle文件中看到这两行

    这里写图片描述

    System.getenv("REACT_NATIVE_DEPENDENCIES")这句话就是获取REACT_NATIVE_DEPENDENCIES的环境变量,作为react-native的启动目录,上面的代码注释的很清楚,不要感觉配置文件看起来很难的样子,我一开始也很抵触研读这些东西,其实只要认真,耐心看完,是可以看懂的,下面配置环境变量就很简单啦,把路径:D:\AndroidStudioProjects\ReactGitDemo\react-native\ReactAndroid\build\downloads(注意:这个路径是我的!!!)设置到REACT_NATIVE_DEPENDENCIES就可以了

    这里写图片描述

    下面,重新打开cygwin,重新执行./gradlew :Examples:UIExplorer:android:app:installDebug命令,应该差不多可以了,如果出现其他问题的话,这里是官方issue的集中营,搜关键字试一下,会有你想要的答案。

    最后,我想说的是,万事开头难,既然想学react-native的话,就不要害怕碰到问题,目前这门技术还不算是非常成熟,但是我觉得如果我们能在react-native普及之前学会它,那我们获得的收获才能最大化,我也是一路摸索着学习的,进度很慢,但肯定会越来越好的。

    我也是个初学者,这篇文章里如有错误之后请大家帮忙指出,个人QQ:294958260,也欢迎大家一起讨论,共同学习!

    展开全文
  • react-native 运行项目

    2018-06-27 19:01:57
    2.react-native run-android 打包安卓项目,如果连接了手机,那么运行完后会直接发送到手机安装,如果没有连接手机,可以在android\app\build\outputs\apk下找到刚才打包的文件,发送到手机安装或者在手机模拟器上...

    打开cmd,找到项目所在位置,运行以下指令:

    1.npm install,安装项目依赖,有时可能需要翻墙,一般比较慢。

    2.react-native run-android  打包安卓项目,如果连接了手机,那么运行完后会直接发送到手机安装,如果没有连接手机,可以在android\app\build\outputs\apk下找到刚才打包的文件,发送到手机安装或者在手机模拟器上安装,如果在手机安装,安装好后,进入程序,摇一摇手机,在弹出框上选择Dev settings,然后点击debugging,输入电脑的ip地址,要求手机与电脑处在同一wifi。

    3、react-native start,摇一摇手机,项目就开始在手机上运行了,可以点击弹框上的stop remote js debugging,在浏览器上会看到相应的信息,配合调试。

    作为一个新手,运行了我的第一个react-native项目,成功跑起来了,真是不容易,今天先写到这里,以后再更新。

    展开全文
  • 因为后边要做rn项目,所以需要搭建下环境,过程中遇到很多问题,特记录下来。 首先我是按照react-native中文网官方提供的教程进行进行安装的。 react-native 需要的依赖的环境:node, python2, jdk,react-native-...

    因为后边要做rn项目,所以需要搭建下环境,过程中遇到很多问题,特记录下来。
    首先我是按照react-native中文网官方提供的教程进行进行安装的。
    一、环境配置

    1. react-native 需要的依赖的环境:node, python2, jdk,react-native-cli. 这里需要注意,python必须是2,jdk必须是1.8以上,jdk遇到过坑,因为本地安装了多个版本的jdk,使用java -version查看了下显示是1.8版本,就以为jdk默认也是1.8,但是在react-native run android时候出现:
    > java.lang.UnsupportedClassVersionError: com/android/build/gradle/AppPlugin : Unsupported major.minor version 52.0
    

    于是去环境变量配置中检查了下配置,发现jdk配置的是1.6版本,切换成1.8就可以了。

    1. 安装Android Studio
      教程显示必须安装的几项:

      Android SDK
      Android SDK Platform
      Performance (Intel ® HAXM) (AMD 处理器看这里)
      Android Virtual Device
      

    安装官方提供的教程安装的(https://reactnative.cn/docs/getting-started.html)
    但是在创建项目并运行项目时候遇到了问题:

    Emulator: emulator: ERROR: x86 emulation currently requires hardware acceleration
    

    模拟器完全没法启动,于是百度解决方法:https://blog.csdn.net/ezconn/article/details/81907393
    这个过程中进入bios但是没有找到Intel Virtualization Technology,汗~~。最终查到了在在Advanced菜单下面的CPU里!不是在Main里面的!并且要双击CPU才能看到vt(联想台式机)。这个问题解决,模拟器可以打开了。

    3.于是开始react-native run-android运行项目,又出现了问题:
    在这里插入图片描述
    于是继续查资料,发现是由于没有运行server服务器导致的,于是先react-native start在react-native run-android,依旧报错,此时仔细看run-android的提示:

    D:\RN_learn\Test1> react-native run-android
    warn JS server not recognized, continuing with build...
    info Building and installing the app on the device (cd android && gradlew.bat app:installDebug)...
    

    JS server not recognized,也就是这个server根本没有启动成功,这是由于8081端口被占用了,于是需要更改端口:react-native start --port 8083,然后在react-native run-android --port 8083,此时提示:

    info JS server already running.
    info Building and installing the app on the device (cd android && gradlew.bat app:installDebug)...
    

    好了,js server终于启动起来了,但是还是显示:
    在这里插入图片描述
    这个时候有的手机会显示一片红色,这个时候,一般是服务端正在加载数据或者加载错误,解决办法就是点击下面中间的RELOAD重新加载,或者等一会儿。点了reload依然报错:
    在这里插入图片描述
    也是醉了,我都改成8083端口了,怎么模拟器还是8081端口。。。所以需要更改模拟器中端口,使用 adb shell input keyevent 82调出模拟器的设置:
    在这里插入图片描述
    进入dev setting,选择debug server host & port for device改成本机ip和8083端口:
    在这里插入图片描述
    最后终于看到了想看到的界面,当然,页面文字我已经改过了。。。大功告成。
    在这里插入图片描述

    二、调试

    1. adb shell input keyevent 82 打开开发者菜单,开启Enable Live Reload,界面会随着代码的变化自动刷新。
    2. 在开发者菜单中选择"Debug JS Remotely"选项,即可以开始在 Chrome 中调试 JavaScript 代码。点击这个选项的同时会自动打开调试页面,进入开发者模式即可以调试了。
    展开全文
  • 1、创建React Native项目 创建文件并进入RnDemo mkdir RnDemo 创建项目 react-native init RnDemo 2、用VSCode配置安装 如图(这是我根据自己需要添加的) 3、添加项目 点击打开 如图 4、添加配置 然后会出现下...
  • 1、创建好react nativexia项目,使用VS code打开项目,在android文件下的local.properties写上sdk的路径 2、在终端-新建终端,在终端执行 react-native start命令 报react-native : 无法加载文件 C:\Users\admin...
  • WebStorm是一款前端开发工具,也可以用于React Native项目 下载安装WebStorm WebStorm下载地址 安装完不要运行webstrom 下载破解补丁 打开网址(IntelliJ IDEA 注册码),下载补丁 然后将补丁...
  • 在启动项目时,模拟器上报错信息为: React Native version mismatch 报错信息如上图所示,显示JS,Native的版本不匹配 实际上在我这是由于我前面开了一个android的模拟器,他们都占用8081端口,因此会导致同一个...
  • 下载安装 下载方式和地址:https://blog.csdn.net/yw00yw/article/details/95069000 模拟器设置 查看详细步骤:...连接方式一 cmd进入sdk的platform-tools目录下,运行 adb.exe connect 127.0.0.1:62...
  • 1.需配环境变量,值为sdk的地址。 ANDROID_HOME 值:E:\Users\HP\AppData\Local\Android\sdk 2.下载gradle-2.14.1-all.zip 包 ...修改地址为本地gradle压缩包的地址,这里应该注意路径不可有带空格...要导入项目...
  • 创建ReactNative项目 ...运行ReactNative项目 使用命令: react-native run-android 运行项目 Android设备,运行项目成功之后,摇一摇出现弹框,选择Dev Settings,之后选择Debug server host & ...
  • 第二步,打开Android Studio左上角file→open选择项目文件(注意选择项目下面的Android文件)如下图: 点击OK,加载项目,加载完成后,如下图操作: 此时,项目已经成功安装在真机上,但是,你会发下出现...
  • 下载react native项目demo 终端打开项目目录,执行yarn install或npm install 打开Android Stadio,启动安卓模拟器 运行在安卓模拟器上:react-native run-android 我遇到的问题: 在终端执行react-native run-...
  • 安装完react以后,在终端输入以下:react-native init myFirstReactProject安装完成如下图: 蓝色框框里面就写清楚怎么运行,这个项目。 下面举个运行ios版的。 在终端输入下面的命令:cd /Users/zhuling/...
  • android studio直接运行react-native项目时报错 make sure you're either running a metro server(run 'react-native start') 解决办法: You haven't started the bundler yet. Runnpm startorreact-native ...
  • react-native学习笔记 安装依赖 必须安装的依赖有:Node、Watchman、JDK 和 Android Studio。 虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Android Studio 来获得编译 Android 应用所...
  • React Native开源项目如何运行(附一波开源项目) http://www.jianshu.com/p/240d5ab43a48 http://www.jianshu.com/p/240d5ab43a48 http://www.jianshu.com/p/240d5ab43a48 字数902 阅读1437 评论4...
  • 接下来给大家讲解如何将Github上的开源React Native项目下载后在本地运行编译起来,和其他普通的项目不同,React Native的麻烦些。 本文以Github上的一个开源项目,亲戚称谓计算器为例:...
  • 小白尝新,第一次运行RN导出的源码,app.gradle中报错,异常显示找不到这两个文件, 作为第一次运行RN编译代码的...apply from: "../../node_modules/react-native/react.gradle" apply from: "../../node_modules/rea...
1 2 3 4 5 ... 20
收藏数 17,243
精华内容 6,897
关键字:

运行reactnative项目