初次接触React Native

 在Windows下初次接触React Native

React Native已经出来快一年时间了,但是迟迟没有支持Android,最近看群里讨论的挺火,自己也研究了一下。

React Native Android

安装JDK

Java官网之JDK下载列表下载JDK并安装。请注意选择x86还是x64版本。我在这里直接接受了 @天地之灵_邓鋆 的推荐将JDK的bin目录加入到了系统PATH环境变量。注意:下载链接不能直接使用,需要先接受协议(这里有存入cookies),可以通过Java官网之JDK下载列表下载JDK。

设置环境变量PATH:jdk的位置。例如:(PATH => D:\Program Files\Java\jdk1.8.0_60\bin)

安装Android SDK

单独安装Android SDK,在墙的环境下,为了速度我选择了使用androiddevtools

设置环境变量ANDROID_HOME:Android SDK Manager的位置 例如:(PATH => D:\Program Files\Android SDK Tools)
设置环境变量PATH:例如:(PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

安装node.js(网上有的说装python,vc2005,和安装git我貌似没装也可以实现React Native的效果)

从Node官网上下载,我当前使用的是V7.1.0Current傻瓜式安装即可

      安装后测试是否成功,可以通过node -v的命令来测试NodeJS是否安装成功

        

安装React native命令行工具(react-native-cli)

  npm install -g react-native-cli
 重要的东西差不多好了(有的用Git clon对于没有安装Git的完全没必要)

接下来准备开始创建RN项目

     1. 你可以先创建个文件夹命令行找到这个文件夹,然后输入输入react-native init MyProject


           2.可能需要等一会,创建完成后文件目录是这样的,说明已经创建RN项目成功


     3.在命令行中进入项目目录,输入react-native start,等待一段时间如果成功,

 用浏览器访问http://localhost:8081/index.android.bundle?platform=android,可以访问表示服务器端已经可以了。


    4.刚刚运行的命令行窗体不要关闭,重新启动一个新的命令行窗体,进入项目目录MyProject

    由于翻墙下载太浪费时间,找到Gradle下载gradle-2.4-all.zip下载到本地,然后找到项目目录E:\ReactNative\MyProject\android\gradle\wrapper里的

gradle-wrapper.properties文件用编辑器打开修改为你下载的gradle的路径即可

distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip
distributionUrl=file:///E:/BaiduNetdiskDownload/Gradle/gradle-2.4-all.zip

  如果出现下面说明已经成功导入gradle:


   5.安装并启动android模拟器,然后再输入react-native run-android

  我用的是AndroidStudio自带的模拟器一开始用的夜神的模拟器报了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


是没有adb调试桥,找不到驱动,找了好久就是没有结果,

 实在没办法就用原生模拟器还可以运行,运行结果如下:

简单修改添加文字:在E:\ReactNative\MyProject\android\目录下找到index.android.js用编辑器打开即可修改,添加文字效果如下:


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值