前提: 我上文提到的环境配置,如果都ok的话,即可进行以下编写:
第一步:
cmd 命令行输入: react-native init RNDemo 回车 (备注:RNDemo 是自己随便给新程序命名,相当于Android Studio中的 New Project) 这个命令的目的,就是建立一个React native的新工程 ,等到cmd执行完毕,即可在cmd执行的目录下,看到新建的RNDemo工程了.
新工程目录如下:
第二步: 继续在上面的cmd命令行中,输入 npm install 回车 这个时候是把该工程的相关文件编译成build文件, 类似于Android Studio中的Build的文件夹中的文件, 这个时候,目录中会多一个文件出来,如图:
第三步:
进入RNDemo的根目录下: 也就是上面截图的这个图片的目录下(即,Android和IOS 的上一级目录), 直接在目录框中,输入cmd 执行下面代码
react-native run-android 回车等待执行:
执行之前要连接真机或者打开一个虚拟手机, 真机要打开开发者调试模式. 如果正常执行,则你的第一个React Native 程序执行成功了.
如果出现意外: 错误可能如下:
Command `run-android` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.这个错误是你执行的cmd执行所在的位置不正确,必须是该工程的根目录,即上面android和IOS的上一级目录,执行命令即可
错误2:
上面错误,我想你自己也能看懂. 但是你已经打开开发者模式了,并且已经打开USB调试了, adb命令也能找到该设备,这是什么鬼?
其实还有一步,可能漏了.
第四步:
用Android Studio 打开 这个工程的android项目 打开后,解决相关依赖错误,如果没有,直接build,点击run这里是运行不了的, 先build build成功后执行下一步 (该步骤是为了生成 Android Studio项目中的Android部分的build相关文件)
第五步: 继续在RNDemo的根目录执行cmd 输入 React-native run-android 回车后, 等待程序执行完毕,一般要个一两分钟,中途会跳出node 命令框 不用管它,
执行成功后,手机程序效果图如下:
第六步: 编写Hello world
用Sublime text 软件打开这个目录下的App.js文件.
把上面的文件内容全部用以下代码覆盖:
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}