React Native 创建项目

经过前面复杂的 React Native 环境搭建后，我们终于可以开始创建第一个项目了。

创建第一个项目的时候还是有点复杂的，因为我怕大家 环境搭建 里太忙太复杂，所以我分了一部分简单的在这里。

我们首先需要安装一些创建项目的 脚手架 工具。

脚手架 其实就是一种工具，一种为了方便而诞生的工具。

全局安装 React Native 脚手架

首先，我要说明的是我们的 React Native 最低版本是 0.60。因为这个版本对脚手架工具做了一些变更。

React Native 0.59 版本开始，React Native 脚手架工具有两个，一个是之前就存在的 react-native-cli，还有一个新开发的 @react-native-community/cli。这两个现在都能用。

为了以后的 React Native 版本升级考虑，我们采用 react-native-community/cli。

其实采用 react-native 也是一样的，在最新的版本中 react-native-cli 也只是导出了 @react-native-community/cli 而已。

兼容性

为了兼容以前的老版本，我还是把脚手架工具兼容性列出来吧

`@react-native-community/cli`	`react-native`
^2.0.0	^0.60.0
^1.0.0	^0.59.0

安装 `@react-native-community/cli`

react-native-community/cli 只是一个 Node 包而已，我们可以通过 npm -g 全局安装。

npm -g i @react-native-community/cli

如果你使用的是 yarn 则命令如下

yarn -g add @react-native-community/cli

安装完 @react-native-community/cli 之后我们就可以使用 @react-native-community/cli 提供的脚手架工具 react-native 来创建项目了。

目前创建项目的方式有两种，我们推荐你使用第一种

使用 npx 命令

npm 命令只有 @react-native-community/cli 的 ^2.0.0 版本才支持。

这种创建方法可以让我们免去把一些包安装到全局 npm。
```
npx react-native init [项目名称]
```
例如我们要创建一个 hello 项目，则命令如下
```
npx react-native init hello
```
整个安装有点慢，因为需要下载好多包...
使用 @react-native-community/cli 提供的全局命令 react-native

我们强烈不推荐你使用这个命令，如果一定要使用这个命令，那也只建议用它来创建项目。
```
react-native init [项目名称]
```
例如我们要创建一个 hello 项目，则命令如下
```
react-native init hello
```

当项目创建完了之后，控制台就会出现如下提示

✨  Done in 12.15s.
info Installing required CocoaPods dependencies

  Run instructions for iOS:
    • cd hello && react-native run-ios
    - or -
    • Open hello/ios/hello.xcodeproj in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd hello && react-native run-android

打开项目后，我们可以看到文件目录结构如下

hello
├── App.js
├── __tests__
├── android
├── app.json
├── babel.config.js
├── index.js
├── ios
├── metro.config.js
├── node_modules
├── package.json
└── yarn.lock

4 directories, 7 files

总共 4 个目录 7 个顶级文件

运行项目

因为 React Native 也是一个 Node.js 目录，所以我们可以直接当做 Node.js 来运行

yarn react-native start

或

npx react-native start

或

node ./node_modules/.bin/react-native start

但是，这样运行是看不到任何结果的，因为我们还没运行在手机上呢

yarn run v1.15.2
$ /Users/yufei/Downloads/buybit/hello/node_modules/.bin/react-native start
┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   /Users/yufei/Downloads/buybit/hello 

Loading dependency graph...

即使我们访问 http://localhost:8081/ 也一直是在转圈圈。

想知道怎么运行在手机上，请查看下一章节吧

React Native 创建项目

全局安装 React Native 脚手架

兼容性

安装 @react-native-community/cli