热门搜索 :
考研考公
您的当前位置:首页正文

React Native环境搭建(windows版)

来源:东饰资讯网

第一步:安装JDK

  • 1.下载JDK
  • 2.安装JDK(JDK和JRE需安装在不同目录下)
  • 3.配置环境变量
  • 4.配置完成后在cmd命令行中输入java -version出现如下图则配置成功

第二步:安装Anroid-SDK

  • 1.下载SDK
  • 2.安装JDK(JDK和JRE需安装在不同目录下)
  • 3.安装完成后打开SDK Manager 安装下列package
$5HVPT5PV{XJP1UTVRLV~8H.jpg
  • 4.配置环境变量
    *1.找到我的计算机-属性-高级系统设置-高级-环境变量
    *2.新增变量ANDROID_HOMN 值为SDK路径:如D:\Program Files (x86)\Android\android-sdk
  • 5.配置完成后在cmd命令行中分别输入android和adb未出现错误提示则配置成功

第三步:安装Git

  • 1.下载Git
  • **2.安装Git **

第四步:RN环境设置和搭建

  • 1.下载NoteJS
  • **2.安装NoteJS **
  • **3.命令行输入npm测试是否成功 **
  • 4.配置镜像(将npm仓库源替换为国内镜像)
    npm config set registry
    npm config set disturl
  • 5.安装react-native-cli:npm install -g react-native-cli
    安装完成后就能够使用react-native命令了

第五步:运行RN

  • 1.创建项目 打开CMD进入你想创建项目的目录输入
    react-native init AwesomeProject
    此过程需要网络,可能会很慢需耐心等待
    创建完成后该工程文件如下图
  • 2.打开本地服务器 CMD进入工程目录输入
    react-native start 出现如下图即可

  • 3.可以访问 测试服务器
  • 4.此时就能够将工程运行到手机或者模拟器上了
    使用命令react-native run-android
    安装完成后将出现如下图界面(在真机上可能出现白屏情况原因为手机禁用了应用打开悬浮窗的权限,在应用管理中将此权限打开即可)

  • 5摇一摇手机(模拟器输入abd shell input keyevent 82)出现如下界面、点击Dev Settings后,点击Debug server host & port for device设置IP和端口(即让手机能连上本地服务器)
    27-168x300.png
  • 6设置IP和端口,其中IP为你本机IP,端口号为8081(调试过程需手机能连上本地网络,即需要网络访问本地服务器)
  • 7设置完成后回到空白界面再次摇一摇手机,选择Reload JS 程序就能够运行起来了,出现如下界面

到这里就环境就完成啦 -_-*


Top