Merge pull request #556 from rulishu/rls

doc(Android): Android(Windows)真机环境安装文档

Author: ChenlingasMx

website/src/pages/docs/environment-setup/android-phone/README.md

@@ -1,4 +1,4 @@
-Android 真机环境安装(for Mac)
+Android 真机环境安装
 ===
 
 本文档将指导你通过必须的步骤在设备上运行 React Native app，为生产做准备 。
@@ -10,13 +10,13 @@ Android 真机环境安装(for Mac)
 
 ### `1. 开启 USB 调试`
 
-在默认情况下 Android 设备只能从应用市场来安装应用。你需要开启 USB 调试才能自由安装开发版本的 APP
+在默认情况下 Android 设备只能从应用市场来安装应用。你需要开启 USB 调试才能自由安装开发版本的 APP。
 
 首先，确定你已经打开设备的 USB 调试开关。
 
 ### `2. 通过 USB 数据线连接设备`
 
-现在我们设置一个 Android 设备来运行我们的 React Native 项目，通过 USB 将你的设备插入开发机器以继续
+现在我们设置一个 Android 设备来运行我们的 React Native 项目，通过 USB 将你的设备插入开发机器以继续。
 
 下面检查你的设备是否能正确连接到 ADB（Android Debug Bridge），使用`adb devices`命令:
 
@@ -40,22 +40,22 @@ emulator-5554 offline   # Google emulator
 $ npx react-native run-android
 ```
 
-> 🚧 如果你收到"bridge configuration isn't available"错误，请参阅使用adb reverse。
+> 🚧 如果你收到"`bridge configuration isn't available`"错误，请参阅使用adb reverse。
 <!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
 
-> 🚧 提示：你还可以运行npx react-native run-android --variant=release来安装 release 版的应用。当然你需要[先配置好签名](https://reactnative.cn/docs/signed-apk-android)，且此时无法再开启开发者菜单。注意在 debug 和 release 版本间来回切换安装时可能会报错签名不匹配，此时需要先卸载前一个版本再尝试安装。
+> 🚧 提示：你还可以运行`npx react-native run-android --variant=release`来安装 release 版的应用。当然你需要[先配置好签名](https://reactnative.cn/docs/signed-apk-android)，且此时无法再开启开发者菜单。注意在 debug 和 release 版本间来回切换安装时可能会报错签名不匹配，此时需要先卸载前一个版本再尝试安装。
 <!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
 
 ## 从设备上访问开发服务器
 
 在启用开发服务器（官方名称 metro，但我们更常称之为 Packager）的情况下，你可以快速的迭代修改应用，然后在设备上立即查看结果。按照下面描述的任意一种方法来使你的设备可以访问到运行在电脑上的开发服务器。
 
-> 🚧 译注：默认情况下模拟器可以自动探测宿主机 ip 并连接，只有 Android 5.0 以下版本的手机需要按下文说明来手动操作。但某些情形下可能也无法正常连接，请注意去[讨论区](https://github.com/reactnativecn/react-native-website/issues)查看是否有人遭遇同类型的问题（不同时期不同版本可能是不同的问题）。有些文章会提到`react-native bundle`命令，这个命令会把 js 文件打包内置到应用中，从而不需要连接 metro，但这并`没有解决问题`。我们在开发中必须使用到 metro，否则无法刷新代码
+> 🚧 译注：默认情况下模拟器可以自动探测宿主机 ip 并连接，只有 Android 5.0 以下版本的手机需要按下文说明来手动操作。但某些情形下可能也无法正常连接，请注意去[讨论区](https://github.com/reactnativecn/react-native-website/issues)查看是否有人遭遇同类型的问题（不同时期不同版本可能是不同的问题）。有些文章会提到`react-native bundle`命令，这个命令会把 js 文件打包内置到应用中，从而不需要连接 metro，但这并`没有解决问题`。我们在开发中必须使用到 metro，否则无法刷新代码。
 <!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
 
 ### `(Android 5.0 及以上)使用 adb reverse 命令`
 
-> 🚧 注意，这个选项只能在 5.0 以上版本(API 21+)的安卓设备上使用。。
+> 🚧 注意，这个选项只能在 5.0 以上版本(API 21+)的安卓设备上使用。
 <!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
 
 首先把你的设备通过 USB 数据线连接到电脑上，并开启 USB 调试（关于如何开启 USB 调试，参见上面的章节）。
@@ -74,8 +74,8 @@ $ npx react-native run-android
 3. 你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
 4. 摇晃设备，或者运行`adb shell input keyevent 82`，可以打开`开发者菜单`<!--rehype:style=color: red;background: #ffd2d2;-->。
 5. 点击`Dev Settings` -> `Debug server host for device`。
-6. 输入你电脑的 IP 地址和端口号（譬如 10.0.1.1:8081）。`在 Mac 上`<!--rehype:style=color: red;background: #ffd2d2;-->，你可以在系统设置/网络里找查询你的 IP 地址。`在 Windows 上`<!--rehype:style=color: red;background: #ffd2d2;-->，打开命令提示符并输入`ipconfig`来查询你的 IP 地址。`在 Linux 上`<!--rehype:style=color: red;background: #ffd2d2;-->你可以在终端中输入`ifconfig`来查询你的 IP 地址。
-7. 回到`开发者菜单`<!--rehype:style=color: red;background: #ffd2d2;-->然后选择`Reload JS`
+6. 输入你电脑的 `IP 地址和端口号`（譬如 10.0.1.1:8081）。`在 Mac 上`<!--rehype:style=color: red;background: #ffd2d2;-->，你可以在系统设置/网络里找查询你的 IP 地址。`在 Windows 上`<!--rehype:style=color: red;background: #ffd2d2;-->，打开命令提示符并输入`ipconfig`来查询你的 IP 地址。`在 Linux 上`<!--rehype:style=color: red;background: #ffd2d2;-->你可以在终端中输入`ifconfig`来查询你的 IP 地址。
+7. 回到`开发者菜单`<!--rehype:style=color: red;background: #ffd2d2;-->然后选择`Reload JS`。
 
 你现在可以从[开发者菜单](https://reactnative.cn/docs/debugging#accessing-the-in-app-developer-menu)启用实时重新加载。只要你的 JavaScript 代码发生更改，应用就会重新加载。
 

website/src/pages/docs/environment-setup/ios-phone/README.md

@@ -8,21 +8,21 @@ iOS 真机环境安装
 
 ### `1. 通过 USB 数据线连接设备`
 
-使用 USB 闪电数据线连接 iOS 设备到 Mac。导航到工程的ios文件夹，然后用 Xcode 打开.xcworkspace文件，如果是 0.60 以前的版本则打开.xcodeproj文件。
+使用 USB 闪电数据线连接 iOS 设备到 Mac。导航到工程的`ios`文件夹，然后用 Xcode 打开`.xcworkspace`文件，如果是 0.60 以前的版本则打开`.xcodeproj`文件。
 
-如果这是第一次在 iOS 设备上运行 app，需要注册开发设备。从 Xcode 菜单栏打开Product菜单，然后前往Destination。从列表中查找并选择设备。Xcode 将注册为开发设备。
+如果这是第一次在 iOS 设备上运行 app，需要注册开发设备。从 Xcode 菜单栏打开`Product`菜单，然后前往`Destination`。从列表中查找并选择设备。Xcode 将注册为开发设备。
 
 ### `2. 配置代码签名`
 
 如果没有[Apple developer account](https://developer.apple.com/)，先注册。
 
-在 Xcode Project 导航中选择 project，然后选择 main target（它应该和 project 共享同样的名字）。查找"General"标签。前往"Signing"并确保在"Team"下拉下选择了开发者账号或团队。tests target（以 Tests 结尾，在 main target 下面）也需要重复同样的操作。
+在 Xcode Project 导航中选择 `project`，然后选择 `main target`（它应该和 project 共享同样的名字）。查找`"General"`标签。前往`"Signing"`并确保在`"Team"`下拉下选择了开发者账号或团队。`tests target`（以 Tests 结尾，在 main target 下面）也需要重复同样的操作。
 
 ![Xcode Project](./001.png)<!--rehype:style=max-width: 480px;-->
 
 ### `3. 编译并运行应用`
 
-如果一切设置正确，设备会在 Xcode toolbar 中被列为 build target，也会出现在设备面板里(⇧⌘2)。现在可以按下 Build and run 按钮(⌘R)或从Product菜单中选择Run。app 会立刻启动在设备上。
+如果一切设置正确，设备会在 Xcode toolbar 中被列为 `build target`，也会出现在设备面板里(`⇧⌘2`<!--rehype:style=color: red;background: #ffd2d2;-->)。现在可以按下 `Build and run` 按钮(`⌘R`<!--rehype:style=color: red;background: #ffd2d2;-->)或从`Product`菜单中选择`Run`。app 会立刻启动在设备上。
 
 ![Xcode toolbar](./002.png)<!--rehype:style=max-width: 480px;-->
 
@@ -31,7 +31,7 @@ iOS 真机环境安装
 
 ## 从设备上访问开发服务器
 
-在启用开发服务器的情况下，你可以快速的迭代修改应用，然后在设备上立即查看结果。只需要在和电脑同样的 Wi-Fi 网络。摇晃设备打开[Developer menu](https://reactnative.cn/docs/debugging#accessing-the-in-app-developer-menu)，然后 enable Live Reload。当 JavaScript 代码改变时 app 会重载。
+在启用开发服务器的情况下，你可以快速的迭代修改应用，然后在设备上立即查看结果。只需要在和电脑`同样的 Wi-Fi 网络`<!--rehype:style=color: red;background: #ffd2d2;-->。摇晃设备打开[Developer menu](https://reactnative.cn/docs/debugging#accessing-the-in-app-developer-menu)，然后 `enable Live Reload`。当 JavaScript 代码改变时 app 会重载。
 
 ![Developer menu](./003.png)<!--rehype:style=max-width: 480px;-->
 
@@ -42,18 +42,18 @@ iOS 真机环境安装
 
 当尝试连接到开发服务器时，可能得到一个红屏报错说：
 
-> 🚧 注意：Connection to http://localhost:8081/debugger-proxy?role=client timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in RCTWebSocketExecutor.m.
+> 🚧 注意：Connection to `http://localhost:8081/debugger-proxy?role=client` timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in RCTWebSocketExecutor.m.
 <!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
 
 解决这个问题检查以下几点。
 
 ### `1. Wi-Fi 网络`
 
-确保笔记本电脑和电话在`同一个`<!--rehype:style=color: red;background: #ffd2d2;-->Wi-Fi 网络
+确保笔记本电脑和电话在`同一个`<!--rehype:style=color: red;background: #ffd2d2;-->Wi-Fi 网络。   
 
 ### `2. IP 地址`
 
-确保编译脚本正确检测到机器的 IP 地址(e.g. 10.0.1.123)。
+确保编译脚本正确检测到机器的 IP 地址(`e.g. 10.0.1.123`)。
 
 ![](./004.png)
 

website/src/routes/menus.ts

@@ -83,9 +83,9 @@ export const docsMenus: MenuData[] = [
   { path: '/docs/environment-setup/ios', name: 'iOS 环境安装' },
   { path: '/docs/environment-setup/android', name: 'Android(Mac) 环境安装' },
   { path: '/docs/environment-setup/android-windows', name: 'Android(Windows) 环境安装' },
-  { path: '/docs/environment-setup/ios-phone', name: 'iOS 真机环境安装' },
-  { path: '/docs/environment-setup/android-phone', name: 'Android(Mac) 真机环境安装' },
-  // { path: '/docs/environment-setup/android-windows-phone', name: 'Android(Windows) 真机环境安装' },
+  { path: '/docs/environment-setup/ios-phone', name: 'iOS 真机运行' },
+  { path: '/docs/environment-setup/android-phone', name: 'Android(Mac) 真机运行' },
+  { path: '/docs/environment-setup/android-windows-phone', name: 'Android(Windows) 真机运行' },
   { divider: true, name: 'APP 打包' },
   { path: '/docs/unpack/ios', name: 'iOS 打包' },
   { path: '/docs/unpack/android', name: 'Android(Mac) 打包' },

website/src/routes/router.tsx

@@ -41,6 +41,10 @@ export const routeData = [
         path: '/docs/environment-setup/android-phone',
         component: lazy(() => import('../pages/docs/environment-setup/android-phone')),
       },
+      {
+        path: '/docs/environment-setup/android-windows-phone',
+        component: lazy(() => import('../pages/docs/environment-setup/android-phone')),
+      },
       {
         path: '/docs/app-store/ios',
         component: lazy(() => import('../pages/docs/app-store/ios')),