zoukankan      html  css  js  c++  java
  • windows 7下React Native环境配置

      React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 。FaceBook 也号称这们技术是 “Learn Once,Write AnyWhere”,学习成本只有一次,却完成了所有开发角色的统一。

      这意味着:

      1.app 将来都是可像网页一样热更新,随时发布。

      2.对于一名开发人员,将再也没有前端,终端,后台的区分,他所关注的就是做一整套应用程序,人力将得到最大幅度的整合与释放。

      3.代码复用将会是主旋律,因为是一种语言,大家重复造轮子的成本会越来越节省。

      目前,React Native 也还是有一些缺点的,比如他的 sdk 组件包 size 还比较大,crash 还比较多,在 ios 上支持的内容已经相当不错,android 还属于初级阶段。

      为了学习React Native,有些人建议买个mac,可以没有钱呀!只能在windows上进行环境配置,来感受一下了。

    1、安装Java

    这里需要注意对环境变量的设置,可以根据java -version来检测一下。

    设置环境变量JAVA_HOME,否则后续编译的时候可能会报出找不到tool.jar的错误。

    在path中添加%JAVA_HOME%/bin,如下图所示:

    2、安装和配置SDK

    这里需要注意设置环境变量ANDROID_HOME:Android SDK Manager的位置

    例如:(ANDROID_HOME=> D:Androidsdk)设置环境变量path:例如:(path=> %ANDROID_HOME% ools;%ANDROID_HOME%platform-tools)

    • 打开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

    4、安装node

    想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js, 大家可以通过node -v的命令来测试NodeJS是否安装成功

    5、安装git

    安装React-native需要用到git,如果没有配置git,需要先下载对应的客户端,然后将git加入path环境变量即可。

    6、安装react-native命令行工具react-native-cli

    git配置完成后可以clone React-native-cli了,建议大家到将react-native-cli克隆到某个盘,不要在c盘直接clone

    1)  在命令行中进入你希望react-native安装的目录

    2)   输入git clone https://github.com/facebook/react-native.git,等待下载。

    这种从国外下载资源的时候,可能 由于被墙而失败,所以有的时候需要翻墙进行下载。

    3)   进入刚刚目录下的react-native目录下的react-native-cli目录,输入npm install -g

    7、创建React Native项目

      进入创建项目的目录后,输入react-native init AwesomeProject,等待一段时间(较慢)

    成功后,目录结构如下:

    7、运行服务端服务

    在命令行中进入项目目录,输入react-native start,等待一段时间。启动成功后,可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端启动成功。

    7、运行项目

    刚刚运行服务端的命令行不要关闭,重新启动一个新的命令行,

    进入项目目录,输入react-native run-android启动android项目

    在此命令之前,请确保安卓模拟器已经配置好并启动。

    可以用命令adb devices来查看当前可用的设备列表

    等待运行(如果是第一次运行,首先会下载gradle,时间较长)

    一般第一次部署的时候,由于IP地址和端口号为配置正确,都会出现错误,模拟器可以用ctrl+M (Menu)来调出Dev setting菜单

    真实设备摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口。这里的IP地址就是电脑的IP。

     

     用react-native start --port 9988 可以修改默认的8081端口

     

     

     

  • 相关阅读:
    Mysql查询一段时间记录
    exosip2 的简单使用
    oSIP协议栈浅析
    Oracle 11g New 与分区和存储相关的增强功能
    手动配置S2SH三大框架报错(四)
    手动配置S2SH三大框架报错(三)
    手动配置S2SH三大框架报错(二)
    手动配置S2SH三大框架报错(一)
    链表基本操作的实现
    SVN上传项目报错
  • 原文地址:https://www.cnblogs.com/isaboy/p/window_react_native_android_ios.html
Copyright © 2011-2022 走看看