在ubuntu上进行React-Native开发之环境搭建

在ubuntu上进行React-Native开发

1.开发环境的搭建

概念解读:

Node.js是一个基于Google V8引擎(Chrome javascript运行时)建立的平台

用于方便地搭建响应速度快,易于拓展的网络应用

NVM是nodejs版本管理工具.可以在多个nodejs版本中进行切换,降低了升级nodejs时的成本

NPM是nodejs软件包管理工具,可以方便的安装node相关的外部库

1.安装node

从https://nodejs.org/en/download/ 下载LTS版本的Source Code的tar.gz包

按照https://github.com/nodejs/node#build

所示安装好相关依赖,并编译安装node

完成后

node -v 显示当前node的版本

npm  -v 显示当前npm的版本

2.安装NVM

获取NVM

git clone https://github.com/creationix/nvm.git

clone完成后,进入目录直接执行./install.sh

安装完成后输入nvm如果没有提示,就执行source ./nvm.sh

查看NVM版本 nvm --version

查看NVM帮助 nvm -h

通过nvm ls查看当期已经安装的node或者iojs版本

通过nvm ls-remote查看当前可以安装的node或者iojs版本

通过nvm install v0.21.7安装指定版本的nodejs

通过nvm uninstall v0.21.7安装指定版本的nodejs

通过nvm use v0.21.7切换使用的nodejs版本

3.安装watchman

先安装依赖

sudo apt-get install autoconf  automake python-dev python3-dev

顺利完成依赖环境后,

git clone https://github.com/facebook/watchman.git

cd watchman

git checkout v4.3.0  # the latest stable release 选择最新的版本

./autogen.sh

./configure

make

sudo make install

安装还是比较顺利的

4.安装flow

按照http://flowtype.org/docs/getting-started.html 所示即可完成flow的安装

flow version 会显示flow的版本,

例如 Flow, a static type checker for JavaScript, version 0.21.0

5.安装react-native

npm install -g react-native-cli

过程会比较长,而且要保证网络通畅(科学上网)

6.创建react-native项目(项目名为Demo)

react-native init Demo

过程会耗时较长(看电脑性能和网络通畅)

7.运行项目

在创建Demo完成后,进入项目目录

react-native -v 可以显示当前react-native的版本,如下:

react-native-cli: 0.1.10

react-native: 0.19.0

这时使用 react-native start 运行Demo项目

在编写调试代码的过程中保持此窗口的,

即启动server, 如果没有启动server

会报错React Native: ReferenceError: Can‘t find variable: require (line 1 in the generated bundle)

窗口会显示相关的log信息

8.开发ios程序

直接用Xcode打开ios目录下的.xcodeproj文件夹

9.开发Android程序

相比ios,android要更为麻烦些

1.安装jdk,并配置环境变量

2.安装Android Studio

3.安装Android SDK

4.配置SDK的环境变量

5.安装genymotion模拟器(建议多使用真机)

因为这是在ubuntu下开发Android,考虑到用户权限

要分别在/etc/profile和.bashrc文件中写入环境变量

并执行source .bashrc使环境变量生效

环境变量如下,路径略做修改即可

# set jdk environment

export JAVA_HOME=/usr/lib/jvm/jdk1.8.0_60

export JRE_HOME=${JAVA_HOME}/jre

export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib

export PATH=${JAVA_HOME}/bin:$PATH

#set android sdk tools environment

export ANDROID_HOME=/home/uxstone/android/sdk/

export PATH=$PATH:$ANDROID_HOME/platform-tools/

10.运行Andorid项目

可以使用模拟器可以使用真机(注意要保证react-native运行的Server和Andorid程序在同一个网络环境下)

在Demo项目目录下,执行react-native run-android 即可打包编译APK了

正常运行屏幕会显示Welcome to React Native 点击菜单健(真机可以摇一摇)显示相关调试按钮

在这里要介绍如何把真机和Server相连

在弹出的调试菜单中的Dev Settings中的Debug Server host中写上Server端的ip地址+端口,例如 192.168.0.1:8081

端口是在React Native 的Server开头显示的

在编码调试过程中一定不能关闭Server窗口(即第7步中react-native start命令的那个窗口)

时间: 2024-10-13 08:15:05

在ubuntu上进行React-Native开发之环境搭建的相关文章

react native 入门 (1)- 环境搭建, 创建第一个Hello World

Create React Native App 是开始构建新的React Native应用程序的最简单方法.它允许您启动项目而无需安装或配置任何工具来构建本机代码 - 无需安装Xcode或Android Studio. 先安装Node.Js,则可以使用npm来安装create-react-native-app命令行实用程序: (NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准), npm install -

React Native IOS ---基础环境搭建(前端架构师)

React Native -IOS 开发环境搭建 web架构(基础) 安装依赖 * 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. npm 镜像 npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global Yarn.React Native 的命令行工

React Native学习(一) 环境搭建

需安装工具 RN环境: [必须] Node [必须] react-native-cli [可选] Node Package Manager(npm):node包管理工具,一般安装Node会带上npm * [可选] Node Version Manager(nvm):node版本管理工具 * [可选] watchman * [可选] flow iOS端: [必须] Xcode 安卓端: [必须] Java环境 [必须] Android Studio [必须] Android SDK [必须] AN

【REACT NATIVE 跨平台应用开发】环境搭建问题记录&&XCODE7模拟器上COMMAND+R失效的几种替换方法

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2147.html React Native 这里不多介绍,其实就是个跨平台开发原生应用的开源引擎. 更详细的介绍,大家可以搜索"facebook react native" 或 "taobao react native" 附上 React Native 官方网站:http://react

【React Native开发】React Native For Android环境配置以及第一个实例

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50456967 本文出自:[江清清的博客] (一)前言 FaceBook早期开源发布了React Native For IOS,终于在2015年9月15日也发布了ReactNative for Android,虽然Android版本的项目发布比较迟,但是也没有阻挡了广大开发者的热情.可以这样讲在2015年移动平台市场上有两个方向技术研究比较火,第一种为阿里,百度,腾讯

【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 开发 IDE 选型和配置

@author ASCE1885的 Github 简书 微博 CSDN 知乎 本文首发于 InfoQ 移动技术公众号:移动开发前线 由于潜在的商业目的,未经许可不开放全文转载许可,谢谢! React Native 发布一年多了,有不少公司已经在线上产品中或小范围试水,或大范围应用,很多公司或开发者都在为 React Native 的生态系统作出自己的贡献.React Native 的开发基本上是 Javascript + 系统原生开发语言(Java,Objective-C,Swift),原生语言

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 upg

Mac配置React Native开发环境

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