Skip to content

Commit ea0e22d

Browse files
sunnylqmsunnylqm
committed
fix(cnwebsite): restore Expo and CLI setup guide
1 parent 792528b commit ea0e22d

7 files changed

Lines changed: 800 additions & 210 deletions

File tree

‎cndocs/set-up-your-environment.md‎

Lines changed: 116 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,27 @@ title: 搭建开发环境
44
hide_table_of_contents: true
55
---
66

7-
import Tabs from '@theme/Tabs';
8-
import TabItem from '@theme/TabItem';
9-
import constants from '@site/core/TabsConstants';
7+
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
108

11-
import GuideLinuxAndroid from './\_getting-started-linux-android.md';
12-
import GuideMacOSAndroid from './\_getting-started-macos-android.md';
13-
import GuideWindowsAndroid from './\_getting-started-windows-android.md';
14-
import GuideMacOSIOS from './\_getting-started-macos-ios.md';
9+
import GuideLinuxAndroid from './\_getting-started-linux-android.md'; import GuideMacOSAndroid from './\_getting-started-macos-android.md'; import GuideWindowsAndroid from './\_getting-started-windows-android.md'; import GuideMacOSIOS from './\_getting-started-macos-ios.md';
1510

16-
本指南将帮助你搭建开发环境，以便使用 Android Studio 和 Xcode 运行你的项目。这样你就可以使用 Android 模拟器和 iOS 模拟器进行开发、在本地构建应用等。
11+
欢迎使用 React Native！这篇文档会帮助你搭建基本的 React Native 开发环境。
1712

18-
:::info
19-
本指南需要安装 Android Studio 或 Xcode。如果你已经安装了其中一个，通常几分钟内即可上手。如果尚未安装，预计需要大约一个小时来完成安装和配置。
13+
<Tabs groupId="guide" defaultValue={constants.defaultGuide} values={constants.guides}>
14+
<TabItem value="native">
2015

21-
<details>
22-
<summary>搭建环境是必须的吗？</summary>
16+
根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。如果想同时开发 iOS 和 Android 也没问题，你只需要先选一个平台开始，另一个平台的环境搭建只是稍有不同。
2317

24-
如果你使用的是[框架](/architecture/glossary#react-native-framework)，则不需要搭建开发环境。使用 React Native 框架时，框架会自动为你构建原生应用，无需你手动安装 Android Studio 或 Xcode。
18+
如果`阅读完本文档`后还碰到很多环境搭建的问题，我们建议你还可以再看看[求助讨论区](https://github.com/reactnativecn/react-native-website/issues)。注意！视频教程或者其他网络上的博客和文章可能和本文档有所出入，请以最新版本的本文档所述为准！
2519

26-
如果你有特殊限制无法使用框架，或者你希望编写自己的框架，那么搭建本地环境是必需的。环境搭建完成后，请参阅[不使用框架开始开发](getting-started-without-a-framework)。
20+
#### 开发平台
2721

28-
</details>
29-
:::
30-
31-
#### 开发操作系统
32-
33-
<Tabs groupId="os" queryString defaultValue={constants.defaultOs} values={constants.oses} className="pill-tabs">
22+
<Tabs groupId="os" defaultValue={constants.defaultOs} values={constants.oses} className="pill-tabs">
3423
<TabItem value="macos">
3524

36-
#### 目标操作系统
25+
#### 目标平台
3726

38-
<Tabs groupId="platform" queryString defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
27+
<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
3928
<TabItem value="android">
4029

4130
[//]: # 'macOS, Android'
@@ -55,9 +44,9 @@ import GuideMacOSIOS from './\_getting-started-macos-ios.md';
5544
</TabItem>
5645
<TabItem value="windows">
5746

58-
#### 目标操作系统
47+
#### 目标平台
5948

60-
<Tabs groupId="platform" queryString defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
49+
<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
6150
<TabItem value="android">
6251

6352
[//]: # 'Windows, Android'
@@ -69,21 +58,19 @@ import GuideMacOSIOS from './\_getting-started-macos-ios.md';
6958

7059
[//]: # 'Windows, iOS'
7160

72-
## 不支持
61+
## 暂不支持
7362

74-
:::info
75-
构建 iOS 原生代码项目需要 Mac。你可以使用 [Expo](https://expo.dev) 提供的 [Expo Go](https://expo.dev/go) 在你的 iOS 设备上开发应用。
76-
:::
63+
> 苹果公司目前只允许在 Mac 电脑上开发 iOS 应用。如果你没有 Mac 电脑，那么只能考虑使用`沙盒环境`，或者先开发 Android 应用了。
7764
7865
</TabItem>
7966
</Tabs>
8067

8168
</TabItem>
8269
<TabItem value="linux">
8370

84-
#### 目标操作系统
71+
#### 目标平台
8572

86-
<Tabs groupId="platform" queryString defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
73+
<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
8774
<TabItem value="android">
8875

8976
[//]: # 'Linux, Android'
@@ -95,14 +82,109 @@ import GuideMacOSIOS from './\_getting-started-macos-ios.md';
9582

9683
[//]: # 'Linux, iOS'
9784

98-
## 不支持
85+
## 暂不支持
86+
87+
> 苹果公司目前只允许在 Mac 电脑上开发 iOS 应用。如果你没有 Mac 电脑，那么只能考虑使用`沙盒环境`，或者先开发 Android 应用了。
88+
89+
</TabItem>
90+
</Tabs>
91+
92+
</TabItem>
93+
</Tabs>
94+
95+
</TabItem>
96+
<TabItem value="quickstart">
97+
98+
> 译注：沙盒环境大量依赖于国外网络环境，也不能直接安装第三方原生组件。不建议国内用户使用
99+
100+
Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility:
101+
102+
<Tabs groupId="package-manager" defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
103+
<TabItem value="npm">
104+
105+
```shell
106+
npm install -g expo-cli
107+
```
108+
109+
</TabItem>
110+
<TabItem value="yarn">
111+
112+
```shell
113+
yarn global add expo-cli
114+
```
115+
116+
</TabItem>
117+
</Tabs>
118+
119+
Then run the following commands to create a new React Native project called "AwesomeProject":
120+
121+
<Tabs groupId="package-manager" defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
122+
<TabItem value="npm">
123+
124+
```shell
125+
expo init AwesomeProject
126+
127+
cd AwesomeProject
128+
npm start # you can also use: expo start
129+
```
99130

100-
:::info
101-
构建 iOS 原生代码项目需要 Mac。你可以使用 [Expo](https://expo.dev) 提供的 [Expo Go](https://expo.dev/go) 在你的 iOS 设备上开发应用。
102-
:::
131+
</TabItem>
132+
<TabItem value="yarn">
133+
134+
```shell
135+
expo init AwesomeProject
136+
137+
cd AwesomeProject
138+
yarn start # you can also use: expo start
139+
```
103140

104141
</TabItem>
105142
</Tabs>
106143

144+
This will start a development server for you.
145+
146+
<h2>Running your React Native application</h2>
147+
148+
Install the [Expo](https://expo.io) client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the Camera app.
149+
150+
<h3>Modifying your app</h3>
151+
152+
Now that you have successfully run the app, let's modify it. Open `App.js` in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.
153+
154+
<h3>That's it!</h3>
155+
156+
Congratulations! You've successfully run and modified your first React Native app.
157+
158+
<center><img src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
159+
160+
<h2>Now what?</h2>
161+
162+
Expo also has [docs](https://docs.expo.io) you can reference if you have questions specific to the tool. You can also ask for help at [Expo forums](https://forums.expo.io).
163+
164+
These tools help you get started quickly, but before committing to building your app with Expo CLI, [read about the limitations](https://docs.expo.io/versions/latest/introduction/why-not-expo/).
165+
166+
If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:
167+
168+
- in the [Expo CLI issues](https://github.com/expo/expo-cli/issues) (for issues related to Expo CLI), or
169+
- in the [Expo issues](https://github.com/expo/expo/issues) (for issues about the Expo client or SDK).
170+
171+
If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
172+
173+
<h3>Running your app on a simulator or virtual device</h3>
174+
175+
Expo CLI allows you to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.
176+
177+
Once you've set these up, you can launch your app on an Android Virtual Device by running `npm run android`, or on the iOS Simulator by running `npm run ios` (macOS only).
178+
179+
<h3>Caveats</h3>
180+
181+
Because you don't build any native code when using Expo to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.
182+
183+
If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll need to "[eject](https://docs.expo.io/versions/latest/workflow/customizing/)" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.
184+
185+
Expo CLI configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check [this document](https://docs.expo.io/versions/latest/sdk/overview/#sdk-version) to find out what versions are supported.
186+
187+
If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.
188+
107189
</TabItem>
108190
</Tabs>

‎cnwebsite/versioned_docs/version-0.80/set-up-your-environment.md‎

Lines changed: 114 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,121 @@ title: 搭建开发环境
44
hide_table_of_contents: true
55
---
66

7-
import Tabs from '@theme/Tabs';
8-
import TabItem from '@theme/TabItem';
9-
import constants from '@site/core/TabsConstants';
7+
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
108

11-
import GuideLinuxAndroid from './\_getting-started-linux-android.md';
12-
import GuideMacOSAndroid from './\_getting-started-macos-android.md';
13-
import GuideWindowsAndroid from './\_getting-started-windows-android.md';
14-
import GuideMacOSIOS from './\_getting-started-macos-ios.md';
9+
import GuideLinuxAndroid from './\_getting-started-linux-android.md'; import GuideMacOSAndroid from './\_getting-started-macos-android.md'; import GuideWindowsAndroid from './\_getting-started-windows-android.md'; import GuideMacOSIOS from './\_getting-started-macos-ios.md';
1510

16-
In this guide, you'll learn how to set up your environment, so that you can run your project with Android Studio and Xcode. This will allow you to develop with Android emulators and iOS simulators, build your app locally, and more.
11+
欢迎使用 React Native！这篇文档会帮助你搭建基本的 React Native 开发环境。
1712

18-
:::note
19-
This guide requires Android Studio or Xcode. If you already have one of these programs installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.
13+
<Tabs groupId="guide" defaultValue={constants.defaultGuide} values={constants.guides}>
14+
<TabItem value="quickstart">
2015

21-
<details>
22-
<summary>Is setting up my environment required?</summary>
16+
> 译注：沙盒环境大量依赖于国外网络环境，也不能直接安装第三方原生组件。不建议国内用户使用
2317
24-
Setting up your environment is not required if you're using a [Framework](/architecture/glossary#react-native-framework). With a React Native Framework, you don't need to setup Android Studio or XCode as a Framework will take care of building the native app for you.
18+
Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility:
2519

26-
If you have constraints that prevent you from using a Framework, or you'd like to write your own Framework, then setting up your local environment is a requirement. After your environment is set up, learn how to [get started without a framework](getting-started-without-a-framework).
20+
<Tabs groupId="package-manager" defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
21+
<TabItem value="npm">
2722

28-
</details>
29-
:::
23+
```shell
24+
npm install -g expo-cli
25+
```
3026

31-
#### Development OS
27+
</TabItem>
28+
<TabItem value="yarn">
29+
30+
```shell
31+
yarn global add expo-cli
32+
```
33+
34+
</TabItem>
35+
</Tabs>
36+
37+
Then run the following commands to create a new React Native project called "AwesomeProject":
38+
39+
<Tabs groupId="package-manager" defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
40+
<TabItem value="npm">
41+
42+
```shell
43+
expo init AwesomeProject
44+
45+
cd AwesomeProject
46+
npm start # you can also use: expo start
47+
```
48+
49+
</TabItem>
50+
<TabItem value="yarn">
51+
52+
```shell
53+
expo init AwesomeProject
54+
55+
cd AwesomeProject
56+
yarn start # you can also use: expo start
57+
```
58+
59+
</TabItem>
60+
</Tabs>
61+
62+
This will start a development server for you.
63+
64+
<h2>Running your React Native application</h2>
65+
66+
Install the [Expo](https://expo.io) client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the Camera app.
67+
68+
<h3>Modifying your app</h3>
69+
70+
Now that you have successfully run the app, let's modify it. Open `App.js` in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.
71+
72+
<h3>That's it!</h3>
73+
74+
Congratulations! You've successfully run and modified your first React Native app.
3275

33-
<Tabs groupId="os" queryString defaultValue={constants.defaultOs} values={constants.oses} className="pill-tabs">
76+
<center><img src="https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
77+
78+
<h2>Now what?</h2>
79+
80+
Expo also has [docs](https://docs.expo.io) you can reference if you have questions specific to the tool. You can also ask for help at [Expo forums](https://forums.expo.io).
81+
82+
These tools help you get started quickly, but before committing to building your app with Expo CLI, [read about the limitations](https://docs.expo.io/versions/latest/introduction/why-not-expo/).
83+
84+
If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:
85+
86+
- in the [Expo CLI issues](https://github.com/expo/expo-cli/issues) (for issues related to Expo CLI), or
87+
- in the [Expo issues](https://github.com/expo/expo/issues) (for issues about the Expo client or SDK).
88+
89+
If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
90+
91+
<h3>Running your app on a simulator or virtual device</h3>
92+
93+
Expo CLI allows you to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.
94+
95+
Once you've set these up, you can launch your app on an Android Virtual Device by running `npm run android`, or on the iOS Simulator by running `npm run ios` (macOS only).
96+
97+
<h3>Caveats</h3>
98+
99+
Because you don't build any native code when using Expo to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.
100+
101+
If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll need to "[eject](https://docs.expo.io/versions/latest/workflow/customizing/)" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.
102+
103+
Expo CLI configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check [this document](https://docs.expo.io/versions/latest/sdk/overview/#sdk-version) to find out what versions are supported.
104+
105+
If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.
106+
107+
</TabItem>
108+
<TabItem value="native">
109+
110+
根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。如果想同时开发 iOS 和 Android 也没问题，你只需要先选一个平台开始，另一个平台的环境搭建只是稍有不同。
111+
112+
如果`阅读完本文档`后还碰到很多环境搭建的问题，我们建议你还可以再看看[求助讨论区](https://github.com/reactnativecn/react-native-website/issues)。注意！视频教程或者其他网络上的博客和文章可能和本文档有所出入，请以最新版本的本文档所述为准！
113+
114+
#### 开发平台
115+
116+
<Tabs groupId="os" defaultValue={constants.defaultOs} values={constants.oses} className="pill-tabs">
34117
<TabItem value="macos">
35118

36-
#### Target OS
119+
#### 目标平台
37120

38-
<Tabs groupId="platform" queryString defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
121+
<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
39122
<TabItem value="android">
40123

41124
[//]: # 'macOS, Android'
@@ -55,9 +138,9 @@ If you have constraints that prevent you from using a Framework, or you'd like t
55138
</TabItem>
56139
<TabItem value="windows">
57140

58-
#### Target OS
141+
#### 目标平台
59142

60-
<Tabs groupId="platform" queryString defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
143+
<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
61144
<TabItem value="android">
62145

63146
[//]: # 'Windows, Android'
@@ -69,19 +152,19 @@ If you have constraints that prevent you from using a Framework, or you'd like t
69152

70153
[//]: # 'Windows, iOS'
71154

72-
## Unsupported
155+
## 暂不支持
73156

74-
> A Mac is required to build projects with native code for iOS. You can use [Expo Go](https://expo.dev/go) from [Expo](https://expo.dev) to develop your app on your iOS device.
157+
> 苹果公司目前只允许在 Mac 电脑上开发 iOS 应用。如果你没有 Mac 电脑，那么只能考虑使用`沙盒环境`，或者先开发 Android 应用了。
75158
76159
</TabItem>
77160
</Tabs>
78161

79162
</TabItem>
80163
<TabItem value="linux">
81164

82-
#### Target OS
165+
#### 目标平台
83166

84-
<Tabs groupId="platform" queryString defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
167+
<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
85168
<TabItem value="android">
86169

87170
[//]: # 'Linux, Android'
@@ -93,9 +176,12 @@ If you have constraints that prevent you from using a Framework, or you'd like t
93176

94177
[//]: # 'Linux, iOS'
95178

96-
## Unsupported
179+
## 暂不支持
180+
181+
> 苹果公司目前只允许在 Mac 电脑上开发 iOS 应用。如果你没有 Mac 电脑，那么只能考虑使用`沙盒环境`，或者先开发 Android 应用了。
97182
98-
> A Mac is required to build projects with native code for iOS. You can use [Expo Go](https://expo.dev/go) from [Expo](https://expo.dev) to develop your app on your iOS device.
183+
</TabItem>
184+
</Tabs>
99185

100186
</TabItem>
101187
</Tabs>

0 commit comments

Comments
 (0)