React Native探索之环境搭建与Hello World(Windows/Mac)

我最近创建了一个知识星球,12天已经有150多个朋友加入。星球中的氛围非常好,和优秀的、努力的人一起学习、交流和玩耍,这是一件有趣且有意义的事情。扫描下方二维码加入我们。

1.配置React Native

首先我们要先来安装一些软件,如下所示。 Chocolatey/Homebrew Windows平台安装Chocolatey: Chocolatey是一个Windows上的命令行包管理器,安装了Chocolatey就可以通过命令行来安装一些我们需要软件。我们打开cmd命令行程序使用如下命令即可。

powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient)
.DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

Mac平台安装Homebrew: 在Mac上则需要安装Homebrew,它和Chocolatey的作用是一样的,在终端输入如下命令即可。

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

我的Mac系统版本是10.11.6,安装过程中会提示按下return键,这时按下return键会提示输入系统密码,输入密码后会显示安装成功。 Python 2 Windows平台安装Python 2: 安装完Chocolatey就可以在命令行程序使用Chocolatey来安装Python 2。

choco install python2

Mac系统中自带Python的执行环境,因此不需要安装Python 2。 当然我们也可以直接Python官网去下载安装,下载地址为https://www.python.org/downloads/。 这里我的Windows平台的Python版本为2.7.10。

Node.js Windows平台安装Node.js:

choco install nodejs.install

Mac平台安装Node.js:

brew install node

同样的也可以去Node.js官网去下载安装,地址为https://nodejs.org/en/。 这里我的Windows平台的Node.js版本为7.8.0。Windows平台关掉cmd命令提示符窗口,打开Node.js command prompt(Node.js命令提示符窗口),输入如下语句来设置npm镜像以加速后面的过程,Mac平台在终端输入即可:

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-cli) 接下来安装Yarn和react-native-cli,Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。react-native-cli则用于执行React Native的创建、初始化、更新项目、运行打包服务(packager)等任务。在Windows或者Mac平台输入如下语句来安装它们。

npm install -g yarn react-native-cli

安装完yarn后也要设置镜像源:

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

2.配置Android Studio

这里假设你是一个Android开发者并且已经安装了Android Studio,我们要确保SDK安装正确,打开Android Studio的SDK Manager,在SDK Platforms窗口中勾选Show Package Details,并确保已经安装了下图打勾的选项。

接下来在SDK Tools窗口中勾选Show Package Details,在Android SDK Build Tools列表中勾选23.0.1,勾选最底部的Android Support Repository。

3.使用React Native创建并运行项目

接下来我们创建和运行项目,在Windows或者Mac平台的命令提示符窗口进入需要存储React Native项目的文件目录,输入如下语句来创建项目:

react-native init firstProject

这时会在存储文件中生成名为firstProject的项目文件,我们用Android Studio加载firstProject文件中android文件。 接下来运行SDK的模拟器,这里我的模拟器为Android 6.0版本的Nexus6。最后输入如下命令来将React Native项目运行到模拟器中:

cd firstProject
react-native run-android

这时模拟器运行效果如下图所示。

这时我们可以通过连续两次按下键盘的R键来刷新界面来查看你的最新修改。通过摇动手机(真机)或者按下menu键(CTRL+M/⌘+M)来进入React Native的开发者选项。 关于模拟器这里建议使用Genymotion,它所占用的内存要远小于SDK自带的模拟器。

4.Hello World

我们将index.android.js 文件的代码清空并加入如下代码。

import React, { Component } from 'react';//1
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {//2
  render() {
    return (
      <Text>Hello world</Text>//3
    );
  }
}
AppRegistry.registerComponent('firstProject', 
() => HelloWorldApp);//4

这段代码是ES6编写的,ES6是JavaScript语言的下一代标准。不了解的同学可以买一本阮一峰的《ES 6标准入门》,电子书地址为http://es6.ruanyifeng.com/。 在注释1处做了两件事,一是为react组件指定默认的输出,并命名为React,二是从react组件中导入Component 变量。 注释2处定义了HelloWorldApp 组件并继承自Component ,接着在render方法中return了注释3处的内容,这是一种在JavaScript中嵌入XML结构的语法,叫做JSX,JSX编写的内容会显示在界面中。注释4处用AppRegistry模块来告知React Native哪一个组件被注册为整个应用的根容器。 接着我们连续两次按下键盘的R键来刷新界面,这样"Hello world"就显示在界面中。

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2018-06-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏崔庆才的专栏

如何搭建一台FTP服务器

由于整个学校相当于一个大型局域网,相互之间传送数据非常快,比如要共享个电影,传点资料什么的。所以我们可以选择搭建一个FTP服务器来共享文件。通过本文给大家说一下...

4.4K0
来自专栏林德熙的博客

WPF 使用 VisualStudio 2017 项目文件

在 WPF 如果需要访问项目的文件,如在项目文件放一张图片,需要在 xaml 或后台代码读取,这个就是需要用到本文的技术。

2842
来自专栏乐百川的学习频道

在虚拟磁盘中安装Windows Server 2016

说起来我一直没有安装过Windows服务器版的系统,所以最近想尝试一下Windows Server 2016,这个最新的Windows服务器系统。当然如果是家用...

4656
来自专栏数据之美

Ubuntu on Windows10 跨平台开发环境搭建权威指南

程序猿经常争论的一个话题是:日常开发到底 Windows 好还是 Linux 好?进而演化出另一个问题:到底选 MacBook 好还是 SurfaceBook ...

56614
来自专栏bboysoul

vcenter6.5安装

首先下载安装包,是一个iso包,解压到本地,进入vcsa-ui-installer/lin64,之后点击installer就可以安装了,为什么进入lin64这个...

882
来自专栏進无尽的文章

Fastlane| 一句代码完成自动打包发布到蒲公英

第一个选项的意思是:自动截屏。这个功能能帮我们自动截取APP中的截图,并添加手机边框(如果需要的话) 第二个选项的意思是:自动发布beta版本用于TestFli...

1383
来自专栏散尽浮华

Git分支管理的策略梳理

当下最流行的版本管理系统应该是非Git莫属。相比同类软件,Git有很多优点,其中很显著的一点,就是版本的分支(branch)和合并(merge)十分方便。有些传...

20310
来自专栏技术小讲堂

使用GUI工具高效构建你自己的Nuget包丰富包的基础信息添加要包含的文件The end

写这篇文章的原因是我在学习构建nuget包的时候,发现了一个官方推荐的GUI工具,而官方的工具介绍文章已经过时,一些地方和现在最新版本的工具有些差异,所以特意利...

2716
来自专栏用户画像

2.5.5 作业和进程的关系

进程是系统资源的使用者,系统的资源的大部分都是以进程为单位分配的。而用户使用计算机是为了实现一串相关的任务,通常把用户要求计算机完成的这一串任务成为作业。

941
来自专栏進无尽的文章

推送-远程通知推送教程

本文翻译自:raywenderlich.com,原文作者:Jack Wu,译者:JMStack

1192

扫码关注云+社区