React Native 环境搭建

原创 2016年05月30日 17:13:34

本文主要记录的是针对mac环境下的ReactNative环境搭建的

1、下载并安装jdk

2、下载idk,下载地址http://tools.android-studio.org,下载完成之后设置环境变量

     1)、cd ~

      2)、touch .bash_profile

      3)、open .bash_profile

      4)、在打开的文件中加入

            export ANDROID_HOME={/your/sdk/path/}android-sdk-macosx
            export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

      5)、source .bash_profile 退出并保存文件

3、使用home-brew安装npm :brew install npm

     然后 安装react-native  :nam install -g react-native-cli

     安装watchman:brew install watchman

     安装flow: brew install flow

4、初始化示例demo:react-native init HelloNative   这一步耗时较久,要耐心等待,之后进入工程目录   cd HelloNative

    运行工程:react-native run-android

这个环境直接使用真机调试,运行在小米3之后会出现屏幕一片空白的情况,解决如下:设置 ->点击“其他应用管理”->找到示例的应用,点击权限管理  ->在显示悬浮框那里勾选允许 ,设置完之后返回应用主界面,摇晃下手机,选择reload JS,这时可能会出现红屏的情况,再次摇晃手机,点击Dev Settings 之后点击Debug server host & port for device后填上你的电脑的ip地址,端口默认为8081;电脑跟调试的手机需要处于同个Wi-Fi环境下。之后再重新reloadJS就可以看到工程的主界面了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

React Native开发环境搭建

React Native的开发环境搭建,官网有详细的说明,但基于中国的特殊国情,不是太适合我们。安装一些依赖的工具安装Node去官网下载Node的安装文件并安装,安装完成后在终端中运行“node -v...

React Native for Android 学习笔记(一) 操蛋的环境搭建与demo运行

坑我踩了,你们别踩了

React Native入门(一)之安装,环境搭建

介绍最近需要了解一下React Native,所以第一步先搭建环境! 废话不多说,开始! 官网:https://facebook.github.io/react-native/ 中文官网:htt...

安卓转战React-Native之windows下android环境搭建爬坑血泪史

前言 最近又有新的项目立项,所以好久都没有写博客了,然后都是利用闲暇时间来学习React-native。 由于安卓和ios的就业环境给移动端开发带来前所未有的冲击,于是乎很多伙伴们不得不另谋他路,...

React Native入门学习笔记一(环境搭建windows+android)

win+android开发环境搭建装备工作:需要安装jdk、android sdk、nodejs、git安装参考网站:http://facebook.github.io/react-native/do...
  • xundh
  • xundh
  • 2016年06月19日 23:09
  • 860

react native 环境搭建

去年Facebook推出React Native,其宣言是write once, use anywhere。能实现安卓,iOS公用一套代码,轻松实现热更新,听起来还挺爽的,其实坑还是很多在学习中,不过...

React Native Window 开发环境搭建图文详解

正常情况下,按照react-native中文网:http://reactnative.cn/docs/0.42/getting-started.html#content 安装教程就可以了! 当然我这边...

Ubuntu React Native 环境搭建

Ubuntu React Native 环境搭建 本人环境是Ubuntu 64位 14.0.4 . 安装 node.js过程: 1.到node官网下载https://nodejs.org/en/ ...
  • djhsws
  • djhsws
  • 2016年05月19日 18:01
  • 5051

React Native环境搭建(window)及坑处理

1.具体参考http://reactnative.cn/docs/0.41/getting-started.html#content2.遇到的坑A.安装模拟器Genymotion,下载模拟器包的时候由...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native 环境搭建
举报原因:
原因补充:

(最多只允许输入30个字)