From b9ca744978af40bc1461589c601b08765483cc77 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Tue, 29 Nov 2022 01:08:55 +0800 Subject: [PATCH] feat: add react-native.md cheatsheet. --- README.md | 1 + assets/react-native.svg | 7 + docs/react-native.md | 1454 +++++++++++++++++++++++++++++++++++++++ package.json | 2 +- 4 files changed, 1463 insertions(+), 1 deletion(-) create mode 100644 assets/react-native.svg create mode 100644 docs/react-native.md diff --git a/README.md b/README.md index ef18059..76fb6c9 100644 --- a/README.md +++ b/README.md @@ -86,6 +86,7 @@ Quick Reference [Less.js](./docs/lessjs.md) [Next.js](./docs/nextjs.md) [React](./docs/react.md) +[React Native](./docs/react-native.md) [RegEx 正则表达式](./docs/regex.md) [TypeScript](./docs/typescript.md) [Vue 2](./docs/vue2.md) diff --git a/assets/react-native.svg b/assets/react-native.svg new file mode 100644 index 0000000..a7babf1 --- /dev/null +++ b/assets/react-native.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/docs/react-native.md b/docs/react-native.md new file mode 100644 index 0000000..cb3dd41 --- /dev/null +++ b/docs/react-native.md @@ -0,0 +1,1454 @@ +React Native 备忘清单 +=== + +适合初学者的综合 [React Native](https://reactnative.dev/) 备忘清单，在开始 [React Native](https://reactnative.dev/) 之前需要先掌握 [react](./react.md) 库 + +入门 +--- + +### macOS 安装 iOS 环境 + +您将需要 Node、Watchman、React Native 命令行界面、Ruby 版本管理器、Xcode 和 [CocoaPods](./cocoapods.md) + +```bash +$ brew install node # Node 14 或更新版本 +$ brew install watchman +``` + +使用 `.ruby-version` 文件来确保您的 Ruby 版本与所需的一致 + +```bash +$ ruby --version +# ruby 2.7.5 +``` + +注意: macOS 12.5.1 附带了 Ruby 2.6.8，这不是 React Native 所要求的，React Native 70+ 需要 Ruby 2.7.5，可以使用下面工具切换版本： + +- [rbenv](https://github.com/rbenv/rbenv) +- [RVM](https://rvm.io/) +- [chruby](https://github.com/postmodern/chruby) +- 带有 [asdf-ruby](https://github.com/asdf-vm/asdf-ruby) 插件的 [asdf-vm](https://github.com/asdf-vm) + + +创建一个新的应用程序 + +```bash +$ npx react-native init MyApp +# 指定 React Native 版本创建 +$ npx react-native init MyApp --version X.XX.X +# 创建 typescript 版本项目 +$ npx react-native init MyTSApp --template react-native-template-typescript +``` + +安装依赖 + +```bash +$ yarn install # 根目录运行 +$ cd ios # 进入 ios 目录 +$ bundle install # 安装 Bundler +$ bundle exec pod install # 以安装 iOS 依赖项 +``` + +运行你的 React Native 应用程序 + +```bash +# 启动监听打包 JS 服务 +$ npx react-native start +# 启动 iOS 模拟器运行你的应用 +$ npx react-native run-ios +``` + +--- + +:- | -- +:- | -- +`⇧` + `⌘` + `2` | 设备窗格 +`⌘` + `R` | 构建并运行 +`摇动您的设备` | 打开开发者菜单 + + +### macOS 安装 Android 环境 + + +您将需要 Node、Watchman、React Native 命令行界面、JDK 和 Android Studio + +```bash +$ brew install node # Node 14 或更新版本 +$ brew install watchman +``` + +我们建议使用 [Homebrew](./homebrew.md) 安装名为 Azul Zulu 的 OpenJDK 发行版，发行版为 **Intel** 和 **M1 Mac** 提供 JDK + +```bash +$ brew tap homebrew/cask-versions +$ brew install --cask zulu11 +``` + +下载安装 [Android Studio](https://developer.android.com/studio/index.html) + +- Android SDK +- Android SDK Platform +- Android Virtual Device + + +安装安卓SDK，React Native 应用需要 Android 12 (S) SDK，通过 Android Studio 中的 SDK 管理器安装其他 Android SDK + +> SDK 管理器也可以在 Android Studio “**Preferences**” 对话框中找到，位于 **Appearance & Behavior** → **System Settings** → **Android SDK** + +- `Android SDK Platform 31` +- `Intel x86 Atom_64 System Image` 或 `Google APIs Intel x86 Atom System Image` 或 (for Apple M1 Silicon) `Google APIs ARM 64 v8a System Image` + +接下来，选择 `SDK Tools` 选项卡并选中 `Show Package Details` 旁边的复选框。 查找并展开 `Android SDK Build-Tools` 条目，然后确保选择了 **31.0.0**。最后点击 `Apply` 下载并安装 `Android SDK` 及相关构建工具 + +配置 ANDROID_SDK_ROOT 环境变量 + +将以下行添加到您的 `$HOME/.bash_profile` 或 `$HOME/.bashrc`（如果您使用的是 zsh，则为 `~/.zprofile` 或 `~/.zshrc`）配置文件： + +```bash +export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk +export PATH=$PATH:$ANDROID_SDK_ROOT/emulator +export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools +``` + +创建一个新的应用程序 + +```bash +$ npx react-native init MyApp +# 指定 React Native 版本创建 +$ npx react-native init MyApp --version X.XX.X +# 创建 typescript 版本项目 +$ npx react-native init MyTSApp --template react-native-template-typescript +``` + +安装依赖 + +```bash +$ yarn install # 根目录运行 +``` + +使用虚拟设备 + +- 使用 Android Studio 打开 ./AwesomeProject/android +- 从 Android Studio 中打开 **AVD 管理器** 来查看可用的 Android **虚拟设备 (AVD)** 列表 +- 第一次，您可能需要创建一个新的 AVD。选择 **Create Virtual Device...**，然后从列表中选择任何电话并单击“下一步”，然后选择 **S API Level 31 image**。 + +运行你的 React Native 应用程序 + +```bash +# 启动监听打包 JS 服务 +$ npx react-native start +# 启动 iOS 模拟器运行你的应用 +$ npx react-native run-ios +``` + +--- + +:- | -- +:- | -- +`⌘` + `M` | 打开开发者菜单 +按两次 `R` 键 | 构建并运行 + + +基本组件 +--- + +### View + +```jsx +import React from "react"; +import { View, Text } from "react-native"; + +export default function ViewExample() { + return ( + + + + Hello World! + + ); +}; +``` + +构建 UI 的最基本组件 + +### Text + +```jsx +import React from 'react'; +import { Text, StyleSheet } from 'react-native'; + +export default function BoldAndBeautiful() { + return ( + + 我是粗体 + + 和红色 + + + ); +}; + +const styles = StyleSheet.create({ + baseText: { fontWeight: 'bold' }, + innerText: { color: 'red' } +}); +``` + +用于显示文本的组件 + +### TextInput + +```jsx +import React from "react"; +import { SafeAreaView, StyleSheet, TextInput } from "react-native"; + +const UselessTextInput = () => { + const [text, onChangeText] = React.useState("Useless Text"); + return ( + + + + ); +}; + +const styles = StyleSheet.create({ + input: { height: 40, padding: 10, }, +}); + +export default UselessTextInput; +``` + +用于通过键盘将文本输入应用程序的组件 + +### Image + + +```jsx +import React from 'react'; +import { View, Image, StyleSheet } from 'react-native'; + +const styles = StyleSheet.create({ + container: { paddingTop: 50, }, + tinyLogo: { width: 50, height: 50, }, + logo: { width: 66, height: 58, }, +}); + +const DisplayAnImage = () => { + return ( + + + + + + ); +} + +export default DisplayAnImage; +``` + +用于显示图像的组件 + +### ScrollView + +```jsx +import React from 'react'; +import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native'; + +export const App = () => { + return ( + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. + + + + ); +} +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: StatusBar.currentHeight, + }, + scrollView: { + backgroundColor: 'pink', + marginHorizontal: 20, + }, + text: { + fontSize: 42, + }, +}); +``` + +提供一个可以承载多个组件和视图的滚动容器 + +### StyleSheet + +```jsx +import React from "react"; +import { StyleSheet, Text, View } from "react-native"; + +export const App = () => ( + + React Native + +); + +const styles = StyleSheet.create({ + container: { + padding: 24, + backgroundColor: "#eaeaea" + }, + title: { + backgroundColor: "#61dafb", + color: "#20232a", + textAlign: "center", + } +}); +``` + +提供类似于 CSS 样式表的抽象层 + +用户界面 +--- + + +### Button + +```jsx +