美文网首页
React-native之环境搭建(1)

React-native之环境搭建(1)

作者: 飞奔的小马 | 来源:发表于2017-01-23 19:50 被阅读32次
    简介

    React-native是Fackbook开源的一个技术,旨在用JS及react代码开发app,提倡组件化开发,给我们提供一个个封装好的组件供我们调用,强调learn once,write everywhere.
    github地址:https://github.com/facebook/react-native
    react-native中文网地址:http://reactnative.cn/docs/0.40/getting-started.html

    安装步骤

    这里只说基于Android 的在Windows上的环境搭建.

    1.安装JDK

    相信做android开发的电脑上本来就安装有Java开发环境,这里不多介绍
    JDK下载官网http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html

    2.安装SDK

    因为国内网的原因,建议使用镜像代理http://androiddevtools.cn/

    3.安装C++环境

    可以选择Windows SDK、cygwin或mingw,Microsoft Visual c++等其他C++环境。编译node.js的C++模块时需要用到。

    4.安装Node.js与Git

    node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统
    Node.js下载地址:https://nodejs.org/en/download/
    Git下载地址:https://git-for-windows.github.io/

    建议设置npm镜像以加速后面的过程(或使用科学上网工具)。

    设置全局使用指定的镜像
    打开git-cmd.exe,直接在命令行内输入:

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

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

    5.安装React Native命令行工具

    已经在Github上下载react-native代码的情况
    比如我的react-native代码在D://RN_software文件夹下,
    进入到根目录
    D:\RN_software>cd react-native-master
    进入到react-native-cli文件夹
    D:\RN_software\react-native-master>cd react-native-cli
    执行安装操作
    D:\RN_software\react-native-master>cd react-native-cli>npm install -g react-native-cli

    6.创建项目

    比如我在D:\RN_software\app_project创建文件夹用于放置工程项目
    进入目录
    D:\RN_software\app_project>react-native init FirstDemo

    注意一定要驼峰式命名,首字母大写
    7.运行packager 进入工程目录

    react-native start
    可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本

    8.准备模拟器或真机 运行android

    react-native run-android

    success.png
    9.修改后重新加载

    修改代码之后不需要重新运行程序,可以Reload就行,以下两种方式开启
    1.Android 5.0以上及更高版本,可以使用adb reverse命令
    连接设备,usb在调试模式,执行
    adb reverse tcp:8081 tcp:8081 这样就可以使用开发选项了
    2.Android 5.0以下版本可以通过Wifi连接

    • 手机和电脑连接并且两个设备在同一个Wifi网络环境下
    • 采用react-native run-android运行应用
      如果屏幕出现红色没有连接Server,则进行以下操作
    • 摇晃设备或者命令行输入adb shell input keyevent 82,打开开发者菜单
    • 点击Dev Settings进入,然后选择Debug server host & port for device
    • 输入电脑的IP地址和端口号
    • 回到开发者菜单,然后选择点击Reload JS

    Android设备已经去除了Menu按键了,这时候我们可以通过摇晃设备来进行打开菜单,然后完成应用的重新加载,调试以及其他功能
    正常情况下我们可以双击R键,就可以Reload重新加载,但是如果我们修改Android项目中的资源文件(例如res/drawable文件中图片)或者修改Android的源代码,那么就需要重新编译生成应用才可以生效。

    可能遇到的问题
    问题:找不到sdk 或者 无法正常化 sdk路径 解决办法:正确配置环境变量

    问题:failed to find target with hash string 'android-23' in: F:\Android_SDK 解决版本:更新23版本的sdk

    问题:build成功后是红色的:没有连接服务器js Server
    解决方法:ip地址+8081端口 例子:192.168.1.104:8081

    相关文章

      网友评论

          本文标题:React-native之环境搭建(1)

          本文链接:https://www.haomeiwen.com/subject/wwvabttx.html