react-native在windows下的安装遇到的那些坑

本文档详细介绍了如何使用Chocolatey安装Node.js和Python2,并通过npm安装React Native CLI,以及解决初始化React Native项目时可能遇到的问题。

chocolatey安装

直接在命令行执行iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iex会说iwr不能执行,解决方案如下

1.

需要以管理员权限打开命令提示符窗口,然后输入以下命令即可:

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

2.

打开管理员权限的Powershell,然后输入以下命令:

iex ((new-objectnet.webclient).DownloadString('https://chocolatey.org/install.ps1'))


安装nodejs和python2(python2需要科学上网工具)

choco install nodejs.install

choco install python2

npm install -g react-native-cli


react-native init AwesomeProject


cd AwesomeProject

react-native start(执行此命令时出现Command `start` unrecognized. Make sure that you have run `npm install` and that
 you are inside a react-native project.是因为react-native init AwesomeProject未能执行成功需要执行以下三个命令

1.npm config set registry https://registry.npm.taobao.org 

2.npm config set disturl https://npm.taobao.org/dist  

3.react-native init AwesomeProject



补:

将react native加入已存在的工程

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

命令行报错curl不是内部或外部命令,因为地址是https的,所以需要去下载一个包含ssl的curl软件,软件下载地址:https://curl.haxx.se/download.html 下载之后解压,将curl.exe(没有exe文件是因为下错了)文件放到C:\windows\system32下,然后重新执行就可以了

参考文章:

1.https://facebook.github.io/react-native/docs/getting-started.html#content

2.http://blog.youkuaiyun.com/u011054333/article/details/51484943

3.http://blog.youkuaiyun.com/shakdy/article/details/54583774


补-参考博客:

http://www.cnblogs.com/xing901022/p/4652624.html

http://blog.youkuaiyun.com/u010909423/article/details/50602427

<think>我们遇到的问题是在使用 `npm pack` 打包一个作用域包(scoped package)时,生成的 tarball 文件名不符合预期。 根据用户描述,包名是 `@react-native-oh-tpl/react-navigation-tabs`,预期生成的包名应该是 `@react-native-oh-tpl/react-navigation-tabs-2.7.0-rc.1.tgz`,但实际生成的却是 `react-native-oh-tpl-react-navigation-tabs-2.7.0-rc.1.tgz`。 根据 npm 的命名规则,作用域包在打包时,生成的 tarball 文件名会将作用域(`@`和`/`)转换为连字符(`-`),所以实际生成的文件名格式为:`<scope>-<name>-<version>.tgz`。 但是,用户期望的是保留作用域的结构,即生成的文件名为 `@scope/name-version.tgz` 的形式。然而,npm 默认的行为就是转换作用域符号,这是正常的。 然而,用户的问题可能是他们期望在文件名中看到作用域符号(@和/)而不是被转换。但是,在文件系统中,文件名不能包含`@`和`/`这样的特殊字符(特别是`/`会被解释为路径分隔符),所以 npm 必须进行转换。 因此,实际生成的文件名 `react-native-oh-tpl-react-navigation-tabs-2.7.0-rc.1.tgz` 是符合 npm 设计的。 但是,如果用户希望在使用时安装这个 tarball 文件,应该使用: ``` npm install ./react-native-oh-tpl-react-navigation-tabs-2.7.0-rc.1.tgz ``` 安装后,在 `package.json` 中记录的依赖项仍然是带有作用域的名称:`"@react-native-oh-tpl/react-navigation-tabs": "file:..."`。 所以,这个文件名转换是正常的,不需要修复。但如果用户有特殊需求(比如发布到私有仓库,希望保持原始名称),那么可能需要使用其他工具(如`npm publish`)来发布,而不是直接使用 tarball。 然而,用户的问题描述中并没有提到发布,而是打包(pack)。打包的目的可能是为了本地测试或者传递。在这种情况下,使用转换后的文件名是正常的。 因此,我们需要向用户解释这是 npm 的默认行为,并提供替代方案(如果用户确实需要原始名称)。 但是,根据 npm 文档,从 npm 6.9.0 开始,支持使用 `--pack-destination` 参数,但不会改变文件名的生成规则。所以,我们无法通过 npm 参数改变这个行为。 如果用户坚持要一个包含作用域符号的文件名,他们可以在打包后手动重命名文件。但是要注意,重命名后,在安装时仍然需要使用正确的路径。 另一种方法是,用户可以使用 `npm publish` 发布到 registry(公有或私有),然后通过 registry 安装,这样就不会有文件名的问题了。 总结:这是 npm 的默认行为,无法通过配置改变。如果用户需要保留作用域符号的文件名,只能手动重命名,但要注意这样可能会导致一些问题(比如在安装时可能会找不到包,除非使用绝对路径或者相对路径正确指向文件)。 不过,我们也可以查看是否有其他打包工具(如`yarn pack`)的行为不同?但根据 yarn 的文档,其行为与 npm 一致。 因此,我们的回答应该是: 1. 解释原因:作用域包在打包成 tarball 时,作用域符号会被转换成连字符,这是 npm 的默认行为。 2. 说明这是正常现象,不影响本地安装和使用。 3. 如果用户需要保留原始作用域符号,建议手动重命名,并提醒注意事项。 4. 或者建议使用 registry 发布。 另外,根据用户提供的引用,并没有直接相关的信息。但我们可以参考引用[3]和[4]中关于发布组件到npm的内容,说明发布到registry的流程。 现在,我们按照用户的要求生成回答。 </think>### 🔍 问题分析与解决方案:作用域包打包名称转换问题 您遇到的问题本质是 **作用域包(scoped package)** 在 `npm pack` 打包过程中的命名规则导致的转换现象。当包名包含 `@scope/package` 格式时,npm 会将作用域符号 `@` 和路径分隔符 `/` 转换为连字符 `-`,这是 npm 的既定行为。 #### ️ 根本原因与验证 1. **npm 的命名规则** `npm pack` 对作用域包的文件名生成规则为: $$ \text{scope-name} + \text{package-name} + \text{version} $$ 因此 `@react-native-oh-tpl/react-navigation-tabs` 被转换为: `react-native-oh-tpl-react-navigation-tabs-2.7.0-rc.1.tgz` 2. **验证默认行为** 可通过命令预览生成的文件名: ```bash npm pack --dry-run # 输出:react-native-oh-tpl-react-navigation-tabs-2.7.0-rc.1.tgz ``` --- ### ✅ 解决方案:保留原始作用域命名 虽然无法强制 `npm pack` 直接生成包含 `@` 和 `/` 的文件名(文件系统限制),但可通过以下方法间接满足需求: #### 方案一:发布到 npm Registry 自动保留作用域 1. 登录 npm 账户并发布: ```bash npm login # 输入 npm 账号 npm publish --access public ``` 2. **效果**: 发布后,npm 会生成官方下载链接: `https://registry.npmjs.org/@react-native-oh-tpl/react-navigation-tabs/-/react-navigation-tabs-2.7.0-rc.1.tgz` (作用域名保留在路径中) #### 方案二:自定义打包后重命名(推荐本地测试) 1. 打包后手动重命名文件: ```bash npm pack && mv react-native-oh-tpl-react-navigation-tabs-*.tgz \ @react-native-oh-tpl/react-navigation-tabs-2.7.0-rc.1.tgz ``` 2. **使用重命名包安装**: ```bash npm install ./@react-native-oh-tpl/react-navigation-tabs-2.7.0-rc.1.tgz ``` #### 方案三:通过 registry 安装(无需本地文件) 直接使用作用域包的 registry 路径: ```bash npm install https://registry.npmjs.org/@react-native-oh-tpl/react-navigation-tabs/-/react-navigation-tabs-2.7.0-rc.1.tgz ``` --- ### ️ 关键注意事项 1. **文件系统限制** Linux/Windows 文件系统禁止文件名包含 `@` 和 `/`,故无法生成原始作用域格式的文件名[^3]。 2. **发布时的正确路径** 发布到 npm 后,作用域包的实际下载路径为: `https://registry.npmjs.org/@scope/package/-/package-version.tgz` (作用域名通过 URL 路径保留)[^4]。 3. **本地测试建议** 使用 `npm link` 创建本地软链接测试作用域包: ```bash cd /path/to/package npm link # 在包目录执行 cd /path/to/project npm link @react-native-oh-tpl/react-navigation-tabs ``` --- ### 📚 相关参考 - 作用域包发布流程:[^4] - `npm pack` 文件名生成规则:[npm 官方文档](https://docs.npmjs.com/cli/v10/commands/npm-pack) - 文件系统命名限制:[POSIX 文件名规范](https://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap03.html#tag_03_282) --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值