美文网首页
react native环境搭建

react native环境搭建

作者: 世界在脚下vip | 来源:发表于2018-02-24 15:19 被阅读0次

    1.sdk及jdk的安装

    2.c++运行环境安装

    3.安装node.js 和 github

    4.设置npm镜像
    npm config set registry https://registry.npm.taobao.org
    npm config set disturl https://npm.taobao.org/dist

    5.安装react-native包下的
    1)先从github下载facebook/react-native的zip包
    2)解压到指定目录
    3)运行github的命令行工具
    4)进入解压后的目录的react-native-cli目录
    5)运行:npm install -g react-native-cli

    6.创建项目
    1)在指定文件夹创建新工程
    2)运行github的命令行工具,进入刚才新建的目录
    3)运行:react-naive init 你的工程名称(英文、驼峰命名法)

    7.进入工程目录运行:react-native start
    1)进入刚才第6步创建的工程目录 再运行启动命令(也是在github的命令行工具中
    执行)
    2)检查服务是否开启:(注意教程里是index.android.bundle 因为版本迭代入口改为了
    index.js 所以为下面的链接地址)
    在google浏览器中输入
    http://localhost:8081/index.bundle?platform=android

    8.新开一个git命令行窗口,进入工程目录(我的为AsiaSun文件夹)运行:react-native run-android
    1)如果提示找不到android_home环境变量的话 请在电脑的系统环境变量里加入并指向android_sdk目录
    然后关闭报错的窗口重新打开新的git命令行窗口

    2)运行手机上的app显示红屏的话是没有连接到pc端,我这里wifi是屏蔽了ip客户端直接通信的。所以
    我自己开了个移动wifi,其主要目的就是让pc端和手机端在一个网段上可以通信。
    
    3)在手机端进入装好的app,点menu键进入设置菜单 选择-〉Dev Setting -〉Debug server host & port fro device
    设置pc的无线ip地址和端口8081
    
    设置完成后reload
    4)网上说的: reverse tcp:8081 tcp:8081 不能适用于版本低于5.0的android手机,我的手机是4.4.4的版本所以该命令不适合                   我的手机
    

    完成了就显示白色的连接成功的页面!
    测试: 可以通过修改app.js文件 测试是否能显示修改后的文件 判断是否连接服务器正确。

    相关文章

      网友评论

          本文标题:react native环境搭建

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