React Native 初学-新建HelloWorldApp工程

最新推荐文章于 2022-09-07 11:55:06 发布

Ron&&Li

最新推荐文章于 2022-09-07 11:55:06 发布

阅读量1k

点赞数

分类专栏： android开发文章标签： react native

本文链接：https://blog.csdn.net/liyangblog/article/details/71641764

版权

android开发专栏收录该内容

19 篇文章 1 订阅

订阅专栏

搭建react native环境基本上是参考了一下两篇文章：

点击打开链接

第一次按照react native中文网环境搭建跑起来了，结果红屏，隔了几天没搞，结果再跑跑不起来了

接着参考第一个链接的大牛文章才知道，估计是react native命令行工具没安装好，而且git也没配置环境变量

所以在系统变量里面path里加入git安装路径...\bin，新建react native工程目录，我的是E:\react_native_workspace

然后cmd进入E盘react native工程目录react_native_workspace里面输入

git clone https://github.com/facebook/react-native.git等待安装完就行啦。安装完成后在react_native_workspace

里面会看到一个新生成的文件夹react-native。接着cmd进入这个文件夹后输入命令npm install -g等待最终安装完成（参考第一篇文章）。

安装完成后就可以使用react-native命令进行新建项目，启动服务器，启动项目一系列操作。

这个命令行工具安装一次就行了，以后新建react native项目只需要按照下面步骤走就好啦。

1、cmd进入react native工程目录，我的是E:\react_native_workspace，然后输入命令react-native init HelloWorldApp新建HelloWorldApp工程。命令跑完后在E:\react_native_workspace里面会出现一个新的文件夹HelloWorldApp，这样工程建好了。

2、开启本地服务器

cmd进入刚建立好的HelloWorldApp目录里面，执行命令react-native start，等待一会，在浏览器里面打开

http://localhost:8081/index.android.bundle?platform=android，如果可以加载出来的话就说明本地服务起来了。

3、修改js运行HelloWorldApp工程

用编辑器打开HelloWorldApp文件夹里面的index.android.js文件，删掉里面的所有内容，将下面代码复制进去

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

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

// 注意，这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

保存好代码，新打开一个cmd窗口，还是进入 HelloWorldApp目录里面，输入运行命令react-native run-android等待app部署，一定要有一个模拟器或者一个真机连接电脑，有且只有一个，不要同时连几个机器。如果顺利的话就会部署成功，每次新建项目都重复这三个步骤即可。红屏的问题参考文章1，但是按照文章1那样修改完后要重新运行react-native run-android命令才可以。然后我们可以尝试修改js代码，然后双击键盘R，就可以重新加载app了。按ctrl+M调出模拟器（我的是Genymotion）上面的菜单，点击hot reloading支持一下。