React Native入门(一)环境搭建与Hello World
前言目前关于React Native的教程很多,官方文档写的也不错,但是感觉大部分教程写的不是很清楚,导致我各种碰壁。因此我来写一个简洁的教程。本篇文章基于React Native 0.43,只适用于用Windows平台的Android开发者。 1.配置React Native首先我们要先来安装一些软件,如下所示。 powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString ('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%chocolateybin
Python 2 choco install python2
当然我们也可以直接Python官网去下载安装,下载地址为https://www.python.org/downloads/。这里我的Python版本为2.7.10。 Node.js choco install nodejs.install
同样的也可以去Node.js官网去下载安装,地址为https://nodejs.org/en/。这里我的Node.js版本为7.8.0。这时我们关掉cmd命令提示符窗口,打开Node.js command prompt(Node.js命令提示符窗口),输入如下语句来设置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-cli) 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创建并运行项目这时关闭所有的命令提示符窗口,打开Node.js command prompt,进入存储React Native项目路径下,比如我的是d:/rn,输入如下语句来创建React Native项目: react-native init firstProject
这时会在d:/rn中生成名为firstProject的项目文件,我们用Android Studio加载firstProject文件中android文件。接下来运行SDK的模拟器,这里我的模拟器为Android 6.0版本的Nexus6。最后输入如下命令来将React Native项目运行到模拟器中: cd firstProject
react-native run-android
这时模拟器运行效果如下图所示。 这时我们可以通过连续两次按下键盘的R键来刷新界面来查看你的最新修改。通过摇动手机或者按下menu键(CTRL+M)来进入React Native的开发者选项。 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/。 参考资料 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |