React-native 程序第一个HelloWorld的编写

前提: 我上文提到的环境配置,如果都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>
    );
  }
}

然后cmd 执行 react-native run-android   这个时候, 运行成功后,你的第一个Hello World  React-native 程序执行成功! 你可以看到手机的显示的这个界面.以上是编写RN的基本实现步骤!