React Native简介与MAC平台下环境搭建

前端之家收集整理的这篇文章主要介绍了React Native简介与MAC平台下环境搭建前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.React Native是什么技术

React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象[操作系统]原生的 UI 组件,代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码

项目目录结构:

编码方式:

export default class Student{
    constructor(name,sex,age){
        this.name = name;
        this.sex=sex;
        this.age=age;
    }
    getDescription(){
        return '姓名:'+this.name+' 性别:'+this.sex+' 年龄:'+this.age;
    }
}

上面的这么一段代码,就可以运行在iOS或者Android手机上了,是不是觉得React Native这门技术很牛逼呢。

2. 环境搭建:

如果是在Mac平台下的开发者用户,那强烈要求Homebrew,因为只要安装了Homebrew,后面再安装其他软件就一劳永逸了。只需要使用brew install 加上某应用名称或者就可以了。

1.安装Homebrew,打开终端,键入该命令

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

2.安装Node.js
使用刚刚安装的Homebrew来安装Node.js

brew install node

3.安装完node后建议设置npm镜像以加速后面的过程,否则后面插件安装巨慢

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4.安装watchman

brew install watchman

5.安装Flow
Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。

brew install flow

6.React Native安装
React Native的命令行工具(react-native-cli),用于执行创建、初始化、更新项目、运行打包服务等任务。

npm install -g react-native-cli

7.安装Yarn
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

到此,我们开发React Native的所有相关环境都配置好了,当然这里所说的环境配置完成是基于Java环境还有webStorm的开发工具已经安装完成。

好了,激动人心的时刻到了,那如何检测React Native环境是否搭建成功呢,

react-native init TestFirstRNApp

然后进入到TestFirstRNApp的根目录

cd TestFirstRNApp

最后运行该项目,第一次是比较慢的,需要加载很多文件
运行iOS环境

react-native run-ios

运行Android环境
想要将项目安装到安卓虚拟机上的话,就需要先打开Android虚拟机,如果已经安装Android Studio的童鞋,那可以使用Android Studio工具打开。
如何使用命令行打开Android虚拟机 : http://www.jb51.cc/article/p-rdxqzosp-wc.html

react-native run-android

欢迎大家一起讨论学习!

原文链接:https://www.f2er.com/react/304181.html

猜你在找的React相关文章