React Native 开发笔记

ReactNativeDemo

学习ReactNative开发,搭建ReactNative第一个项目

React Native 开发笔记

1、安装Homebrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2、安装wget、git、curl工具

//每次执行brew命令时,最好先执行brew update 或者 brew upgrade 来保持上述几个程序为最新版本。

$ brew update

//接下来安装 wget 工具

$ brew install wget

//安装git指令执行的工具

$ brew install git

//安装curl工具

$ brew install curl

3、安装npm工具,这时会自动安装node.js,并自动设置环境变量

$ brew install npm

//安装telnet命令,Mac OS自带有,不需要安装

$ brew install telnet

Error: No available formula with the name "telnet"

//安装bower、gulp构建js工具

$ npm install gulp bower -g

$ npm install gulp -g

//安装好node.js,检查node.js和使用

$ node

> console.log("hello");

hello

> .exit

//安装watchman,调试js的工具

$ brew install watchman

//安装flow,调试js的工具

$ brew install flow

//查看brew下安装了工具列表

$ brew list

curl        git     openssl     watchman

flow        node        pcre        wget

4、快速开始

1、安装 React Native 组件

React Native 需要一些在 开始 React Native 中阐明的基本的安装。 在完成了这些依赖项的安装之后,这里有两条可以为一个 React Native 项目完全准备好的命令。

$ npm install -g react-native-cli

react-native-cli 是完成剩余安装的命令行工具。它是通过 npm 安装的。这将会在你的终端里面安装 react-native 这个命令行,你只需要做一次即可。

$ react-native init AwesomeProject

译注:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像:

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

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

另,执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。

2、运行iOS应用

$ cd AwesomeProject

用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。

使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。

在iOS Emulator中按下?-R就可以刷新APP并看到你的最新修改!

3、运行Android应用

$ cd AwesomeProject

$ react-native run-android

使用你喜欢的文本编辑器打开index.android.js并随便改上几行

按Menu键(通常是F2,在Genymotion模拟器中是?+M)然后选择 Reload JS 就可以看到你的最新修改。

在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。

5、为已有的React Native工程添加Android支持

如果你已经有了一个只有iOS版本的React Native工程,并且希望添加Android支持,你需要在你的工程目录下运行以下命令:

打开package.json文件,在dependencies项中找到react-native,并将其后的版本号修改为最新版本。

$ npm install

$ react-native android

6、启动 watchman 服务

查看 watchman 服务启动结果

在浏览器运行:

http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false

看看结果是不是下面效果,是则服务启动成功。

7、运行结果

1、第一次运行手机肯定报错

2、这时候摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口

3、这里的IP是电脑的IP,不知道的可以在命令行中输入ipconfig进行查询,端口号固定8081

4、设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native!

5、第一次运行React Native 项目结束。

时间: 2024-12-28 01:52:52

React Native 开发笔记的相关文章

React Native开发 - 搭建React Native开发环境

移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的.然而现在有蛮多的公司开发App是基于React Native来开发的,这样可以做到一个App,就是一套代码,一个团队.对于公司来说,无疑节约了成本. <React Native开发>这系列的文章主要是记录本人利用React Native学习开发的笔记,这一篇文章是第一篇<搭建React Na

Mac配置React Native开发环境

一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提高自己的iOS代码专业能力,掌握Swift3.0,顺便学习学习React Native. 学习一门语言当然少不了硬件和软件设备啦,不然怎么学习...嘿嘿,对吧!!!! 下面记录下自己配置React Native开发环境: 1> 安装brew: 打开终端,输入:   /usr/bin/ruby -e

react native 开发IOS

转载自kaich blog(http://www.kaich.xyz) 接触 react native 对于技术,我比较喜欢追新.看到报道大名鼎鼎的facebook(开源界的模范,发布了很多高质量的开源框架)开源了移动端跨平台的新框架react native,于是就迫不及待的开始接触它了.react native的目的是为了让前端开发任务能开发移动端(ios程序员相对于web端来说要少得多),于是就有了这样的框架.对于我们IOS程序员有没有必要去学它,看到它另外一个特性:跨平台,而且又一定程度的

React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE

Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮的用户界面和非凡的功能,Sublime Text的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等. 1.下载安装Sublime 3 Sublime 3的下载地址: http://www.sublimetext.com/3 选着相应的平

DECO 一个REACT NAtive 开发IDE工具

DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:http://www.reactnativeexpress.com/    配套学习.

【React Native开发】React Native开发IDE安装及配置

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50476350 本文出自:[江清清的博客] (一)前言 上一讲我们已经对于在OS X系统上面对于React Native For Android的环境搭建以及第一个实例做了详细讲解.所谓工欲善其事,必先利其器,做React Native开发也和其他应用开发一样,最好有一个比较好的IDE工具.那么这边比较推荐以下几款工具:sublime,webstorm以及官网推荐的N

React Native开发入门

目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下React的皮毛,但是对React Native的学习就轻松了好多.所以在学习React Native之前,最好还是先学习一下React.因为我学习的iOS开发,对iOS更加了解,所以里面主要涉及到的平台也是iOS. 二.什么是React Native React Native是一款用来开发真正原生.可渲染iO

React Native开发的通讯录应用

React Native开发的通讯录应用(使用JavaScript开发原生iOS应用,vczero) 0.前言: 项目地址:https://github.com/vczero/React-Native-App 欢迎大家提issues讨论任何问题,包括“试衣间”.... 一.项目介绍 基于React-Native & Node通讯录App (1)主要完成的功能有: 基于文件系统的Node.js服务端; 通讯录功能(分类页 + 列表页 + 拨号邮箱邮件) 公告功能(列表页 + 详情页) 通讯录和内容

React Native 开发环境安装和配置使用报错: -bash: react-native: command not found

[React  Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watchman,flow都成功.React  Native 开发环境安装和配置 执行react-native init TestProject 命令 创建demo时报错:-bash: react-native: command not found 报错提示:Please include the follo