手把手教你学RN-入门-step1

RN中文学习网

1. 环境配置

• 1.建议直接手动升级Mac系统。目前最新版本是 11.0.1
• 1. 安装工具包 推荐使用Homebrew

• 3.安装对应版本Node、Watchman、Xcode 和 CocoaPods。

  • Node V12.0 建议直接用nvm node 版本管理工具升级
  • brew install watchman
  • Xcode 直接在APP store 里面安装最新版本即可。

  • CocoaPods IOS-RN的依赖项

    • brew install cocoapods
    • 查看 cocoapods 是否安装成功，执行POD命令

只要升级系统，你就解决了大部分装不上的故障

2. 创建新项目

RN-0.60 及以上版本的原生依赖是通过 CocoaPods 集成安装的。用命令创建。

npx react-native init AwesomeProject

3. 编译并运行 React Native 应用

VScode 打开命令窗口，直接在项目根目录执行
0.60 版本之后的主项目文件是.xcworkspace

yarn react-native run-ios

• 需要注意的地方，如果运行不起来项目，可能网慢，有一些依赖包没有下载下来啊，第一步现在IOS目录执行，执行完之后，目录下有一个PODS 文件夹

pod install 

• 第二步，在根目录执行.重新安装包

npm i

• 第一次用命令行启动，非常慢，要下载一些依赖包。或者直接用Xcode来启动，会快些。终端和XCODE -控制台都有日志。
• 我们在启动过程中经常会遇到解决RN 运行报错 No bundle url present.错误解决方案
• 在项目运行过程中如果遇到提示 watchman 满了，执行

watchman watch-del-all

4. 应用RN核心组件

• 可以直接参考 AwesomeProject 目录下。App.js.
• 常用的RN -UI- COMPONENT

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  TextInput,
  StatusBar,
  Image,
  FlatList
} from 'react-native';