2020-03-28 Win10+Docker+VSCode+ReactNode.js配置

根据客户需求，要在离线环境开发部署基于React的应用。由于：

决定采用Docker，在联网环境下配置React后携带入开发环境。

家里是Win10环境，半年前已经安装了Docker。

Docker在Win10上的安装可以参考官网解决方案 Docker Desktop for Windows 。

（然而其实质。。。就是装了一个VirtualBox里安装的Linux虚拟机，在里面装Docker。）

常规解决方案：

Docker官网

Docker Desktop for Mac

Docker Desktop for Windows

Win7/8可能需要更多 *** 作： Windows Docker 安装-菜鸟教程

这部分坑是最多的，可惜时间太久已经忘记了。

检查Docker版本：

配置Docker镜像：

由于众所周知的原因，需要配置镜像加速。

系统右下角 Docker 图标内右键菜单 Settings，窗口里Daemon标签页内配置json：

使用Node官方镜像为基础搭建

查看 node官方镜像

或

拉取最新版本的node镜像：

查看本地镜像：

运行容器：

进入容器并查看node和npm版本

另外，（由于众所周知的原因，需要配置镜像加速） 2

使用cnpm或给npm配置淘宝镜像：

来到了常见的create-react-app环节

启动应用：

成功运行应用，然而在浏览器里并不能看到。容器的端口并没有和主机绑定。

查看运行中容器状态：

查看容器端口绑定

保存一下镜像并创建容器绑定端口：

重新开启应用：

VSCode是真的香。。。

我用的第一个。

能看到当前镜像和容器。容器上右键可以Attach Visual Studio Code。

然后容器就停了。。。。

docker容器运行必须有一个前台进程， 如果没有前台进程执行，容器认为空闲，就会自行退出。Attach Visual Studio Code使用的是attach命令，就是使用现有终端，如果你要退出容器 *** 作，那么bash结束，容器也就退出了。

重新创建容器，加了持续运行进程。

一、安装最新的nodejs

原博文是这样写说的

npm install -g n //首先安装n模块 

n stable //升级nodejs到最新稳定版 

n 500 //或者指定版本升级 

node -v //检查更新是否成功

我自己是去重新下了一个最新版的nodejs

二、修改npm源为淘宝源

npm config set registry “”

加快npm下载速度，不这样做的话npm install会卡很久。

三、安装脚手架

首先确保自己安装了nodejs，然后全局安装yeoman

npm install -g yo

然后直接安装脚手架

npm install -g generator-reactpackage123456

四、创建React项目

在合适的地方新建一个文件夹，在文件夹下运行：

yo reactpackage12

然后就会在此目录下生成以下目录结构：

├── data

│ └── testjson├── src

│ ├── components

│ │ └── Appjs│ ├── images

│ │ └── yeomanpng│ ├── styles

│ │ └── appscss│ ├── vendor

│ │ └── jqueryjs│ ├── views

│ │ └── homehtml├── node_modules

├── indexhtml├── packagejson└── webpackconfigjs1234567891011121314151617181920

五、调试打包React项目

然后使用以下命令：

npm run dev //项目开发过程使用，启动服务，实时刷新npm run build //开发完成之后打包文件（js、css分开打包）123

六、测试预览项目

本项目默认监听端口是8888，所以在浏览器输入 >

如何在 iOS 设备上运行React Native App

在设备上运行需要 Apple Developer 账号 ，且需要配置你的 iPhone。本指南仅覆盖 React Native 特定的主题。

从设备访问开发服务器

你可以使用开发服务器在设备中快速迭代。要做到这一点，你的笔记本电脑和你的手机必须处于相同的 wifi 网络中。

打开 iOS / AppDelegatem

更改 URL 中的 IP，从 Localhost 改成你的笔记本电脑的 IP

在 Xcode 中，选择你的手机作为构建目标，并按“构建和运行”

提示：晃动设备来打开开发菜单(重载、调试等)

使用离线包

你也可以将应用程序本身的所有 JavaScript 代码打包。这样你可以在开发服务器没有运行时测试它，并把应用程序提交到到 AppStore。

打开 iOS / AppDelegatem

遵循“选项 2”的说明：

取消 jsCodeLocation =[[NSBundle mainBundle]…

在你应用程序的根目录的终端运行给定 curl 命令

Packager 支持几个选项：

dev(默认的 true)——设置了 __DEV__ 变量的值。当是 true 时，它会打开一堆有用的警告。对于产品，它建议使用 dev = false。

minify(默认的 false)——只要不通过 UglifyJS 传输 JS 代码。

故障排除

如果 curl 命令失败，确保 packager 在运行。也尝试在它的结尾添加 ——ipv4 标志。

如果你刚刚开始了你的项目，mainjsbundle 可能不会被包含到 Xcode 项目中。要想添加它,右键单击你的项目目录，然后单击“添加文件……”——选择生成的 mainjsbundle 文件。

当前环境

OS: macOS High Sierra 10135

Node: 8113

Yarn: 170

npm: 560

Watchman: 490

Xcode: Xcode 941

react: 1631 => 1631

react-native: 0554 => 0554

react-native-splash-screen: 310 => 310

1：用Xcode打开项目, 找到Libraries目录，右键选择Add Files to [your project's name]

2：在{project}/node_modules/react-native-splash-screen/ios找到SplashScreenxcodeproj文件，并添加

3：在XCode中，选择你的项目， 选择bilid Phases并将SplashScreenxcodeproj/Products/libSplashScreena文件添加到Link Binary With Libraries中,拖过去即可

4：添加搜索路径：在项目 → Build Settings → Search Paths → Header Search Paths处添加一项为$(SRCROOT)//node_modules/react-native-splash-screen/ios

1：在项目目录{prject}/android/下找到settingsgradle文件添加一下内容

2：在项目目录{prject}/android/app/下找到buildgradle文件添加compile project(':react-native-splash-screen')

3：找到项目目录{project}/android/app/src/main/java/com/app/下MainApplicationjava文件，引入import orgdeviornsplashscreenSplashScreenReactPackage;并添加new SplashScreenReactPackage()

1:找到项目目录{project}/ios/{project}/下AppDelegatem文件，引入#import "SplashScreenh"添加内容如下

2:在XCode中, 点击App/Imagesxcassrts通过LaunchImage添加启动

3:在XCode中，选择你的项目， 选择General找到App Icons and Launch Images下的Launch Images Sourc选择你设置好的LaunchImage

4:如出现错误# unknown receiver 'SplashScreen'; did you mean 'RNSplashScreen', 则改动源码以及AppDelegatem文件如下：

        41源码改动: 找到{project}/node_modules/react-native-splash-screen/ios文件夹下的RNSplashScreenm文件，将其[SplashScreen show];修改为[RNSplashScreen show];,如下图

  42:AppDelegatem文件改动: 找到项目目录{project}/ios/{project}/下AppDelegatem文件，将所有SplashScreen改为RNSplashScreen即可，如下图

43:重启尝试是否有其他问题，修改源码地址可查看我的 github 项目地址，更多问题请查看官方 issues

1:在项目目录{prject}/android/app/src/main/res/下创建layout文件夹

在layout文件夹下创建launch_screenxml添加一下内容

2:将你的启动图改名为launch_screenpng并添加到{prject}/android/app/src/main/res/文件夹下相应的drawable文件夹中（根据需求配置相应大小的文件夹）

1drawable-ldpi

2drawable-mdpi

3drawable-hdpi

4drawable-xhdpi

5drawable-xxhdpi

6drawable-xxxhdpi

3：在{prject}/android/app/src/main/res/values/文件夹下修改名为添加一个名为primary_dark的属性并设置其颜，添加内容如下

4：如果您希望启动屏幕透明，打开{prject}/android/app/src/main/res/values/stylesxml并添加<item name="android:windowIsTranslucent">trueitem>到文件中

首先引入进行模块import SplashScreen from 'react-native-splash-screen'

使用SplashScreenhide()方法将其关闭

1、首先找到没有权限的文件夹，右键单击该文件夹选择属性。

2、在属性里选择安全选项卡。鼠标左键单击安全选项卡里的编辑。

3、在d出的对话框里选择添加进入到选择用户或组。在选择用户或组里点左下角的高级。

4、在新d出的高级的选择用户或组里点击右方的立即查找，然后下方搜索结果会出现电脑上所有的用户或组，在下方搜索结果中找到和选择Everyone，再点击确定即可。

以上就是关于2020-03-28 Win10+Docker+VSCode+React/Node.js配置全部的内容，包括:2020-03-28 Win10+Docker+VSCode+React/Node.js配置、react.js的ant design Pro 不知道怎样依靠npm安装脚手架、如何在 iOS 设备上运行React Native App等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！