React Native 初学-新建HelloWorldApp工程

前端之家收集整理的这篇文章主要介绍了React Native 初学-新建HelloWorldApp工程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

搭建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支持一下。

猜你在找的React相关文章