码迷,mamicode.com
首页 > 其他好文 > 详细

ReactNative安装配置

时间:2018-02-05 14:24:32      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:blog   客户   执行   谷歌浏览器   fetch   端口   osi   打开   menu   

1.安装jdk1.8,配置好path,

1 javac,java -version

2.安装设置Android sdk

 1     a.
 2         解压:D:\www\sdk\adt-bundle-windows-x86_64-20140702
 3     b.环境变量:
 4         ANDROID_HOME: D:\www\sdk\adt-bundle-windows-x86_64-20140702\sdk
 5     c.PATH:
 6         %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;
 7     d.设置SDK,进入AndroidSDK目录
 8         双击SDK Manager.exe。
 9         配置:
10             点开SDK Manager后,点Tools->Options...,进入Android SDK Manager - Settings窗口
11             HTTP Proxy Server:mirrors.neusoft.edu.cn  //上面代理地址之一
12             HTTP Proxy Port:80
13             勾选:Force https://... sources to be fetched using http://...
14             点:close->回到原界面
15             继续点:Packages->Reload
16         选中以下项目:见文件夹下两张图 
17             Android SDK Build-tools version 23.0.1 
18             Android 6.0 (API 23) 
19             Android Support Repository    //必须装
20             Local Maven repository for Support Libraries 
21         //勾上右下角Show Pacage Details->在列表中勾选
22     Android 6.0 (Marshmallow)下
23         Google APIs
24         Intel x86 Atom System Image、Intel x86 Atom_64
25         System Image
26         Google APIs Intel x86 Atom_64 System Image
27     点SDK Tools窗口:
28         勾上右下角Show Pacage Details->在列表中勾选
29         Android SDK Build Tools下:
30             Android SDK Build-Tools 23.0.1。(必须是这个版本)
31         Apply->安装->OK

4.安装node(暂不能装7.1版本)
卸载7.1,安装6.1

5.配置npm 从镜像走
先保存npm config:

1 1.输入:npm config edit
2 2.将弹出的文件另存到:e:/reactNative
3 3.npm config --global edit //显示原始config文件
4 npm config set registry https://registry.npm.taobao.org --global
5 npm config set disturl https://npm.taobao.org/dist --global
6 临时使用:
7 npm --registry https://registry.npm.taobao.org install express //安装Express

6.安装git客户端

7.安装react-native命令行工具react-native-cli

npm install -g react-native-cli

8.创建项目
进入你的工作目录,运行

react-native init hello

9.启动

react-native start

10.浏览器访问

http://localhost:8081/index.android.bundle?platform=android

11.运行模拟器
安装bluestacks,并运行

cmd中运行adb devices //看是否能看到设备

12.连接真机,关闭原先react-native start窗口,另开一dos窗口,执行

react-native run-android

模拟器上不显示文字
真机上正常

谷歌浏览器中查看:

http://localhost:8081/debugger-ui

使用你喜欢的编辑器打开index.ios.js并随便改上几行。
在iOS Emulator中按下?-R就可以刷新APP并看到你的最新修改!

使用你喜欢的文本编辑器打开index.android.js并随便改上几行
按两下R键,或是用Menu键(通常是F2,在Genymotion模拟器中是?+M)打开开发者菜单,然后选择 Reload JS 就可以看到你的最新修改。
在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志

但通常一般第一次手机会报错
摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口
"摇一摇"这个动作在模拟器可以用ctrl+M (Menu)来调出Dev setting菜单
设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native!

//---------------模拟器红屏解决(没解决)----------------------------
点模拟器右下角摇一摇
点击Dev Settings后,点击Debug server host & port for device,设置IP和端口
192.168.0.104:8081
回到空白页面,再次摇一摇手机,选择Reload

参考文献:http://reactnative.cn/docs/0.40/getting-started.html

ReactNative安装配置

标签:blog   客户   执行   谷歌浏览器   fetch   端口   osi   打开   menu   

原文地址:https://www.cnblogs.com/yu-hailong/p/8416895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!