创建React Native的第一个hello world工程

「爱情、让人受尽委屈。」 2024-02-21 07:15 112阅读 0赞

### 创建React Native的第一个hello world工程 ###

需要安装好node、npm环境

如果之前没有安装过`react-native-cli`脚手架的，可以按照下述步骤直接安装。如果已经安装过的，但是在使用这个脚手架初始化工程的时候遇到下述报错的话

cli.init(root, projectname);
          ^
    typeerror: cli.init is not a function
        at run (c:\users\showbi\appdata\roaming\npm\node_modules\react-native-cli\index.js:302:7)
        at createproject (c:\users\showbi\appdata\roaming\npm\node_modules\react-native-cli\index.js:249:3)
        at init (c:\users\showbi\appdata\roaming\npm\node_modules\react-native-cli\index.js:200:5)
        at object.<anonymous> (c:\users\showbi\appdata\roaming\npm\node_modules\react-native-cli\index.js:153:7)
        at module._compile (node:internal/modules/cjs/loader:1105:14)
        at object.module._extensions..js (node:internal/modules/cjs/loader:1159:10)
        at module.load (node:internal/modules/cjs/loader:981:32)
        at function.module._load (node:internal/modules/cjs/loader:822:12)
        at function.executeuserentrypoint [as runmain] (node:internal/modules/run_main:77:12)
        at node:internal/main/run_main_module:17:47

也可以先直接卸载

npm uninstall -g react-native-cli

正常安装过程：

1.  安装`react-native-cli`

npm install -g react-native-cli

1.  安装`react-native`

npm install -g react-native

安装完成之后，可以用脚手架来初始化项目

npx react-native init firstRNProject

就会出现下述的界面

![image-20231016110848723][]

安装编译到Android手机上去

react-native run-android

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_2FUsers_2Fzhouyanxiang_2FLibrary_2FApplication_20Support_2Ftypora-user-images_2Fimage-20231016164019235.png_pos_id_img-eF1Swv53-1697445916780]

启动以后的界面如下所示：

![Screenshot\_2023-10-16-16-40-48-92\_85a2c6e718c04c836aaa40a26ea60b9a][Screenshot_2023-10-16-16-40-48-92_85a2c6e718c04c836aaa40a26ea60b9a]

在这个过程中可能会遇到一些版本带来的问题，

*  比如0.69的版本时候，会遇到上述脚手架初始化的时候报错，参考 https://github.com/facebook/react-native/issues/34055  
    `npx react-native init ProjectName --version 0.68.2` 选择其他版本解决
 *  ruby版本和gem版本不匹配的时候，报错日志信息`Your Ruby version is 3.1.2, but your Gemfile specified 2.7.5`  
    参考 https://github.com/facebook/react-native/issues/35127
 *  启动后报错提示报错信息如下  
    ![在这里插入图片描述][889231b5676b4449b1cb9a86f71e8a10.png]  
    参考https://github.com/facebook/react-native/issues/21530，清除缓存重新npm install安装新的依赖包解决  
    `react-native start --reset-cache`  
    `react-native run-android`

[image-20231016110848723]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/ecadedae948d46f5a14f041988cbc943.png
[20230724024159.png_origin_url_2FUsers_2Fzhouyanxiang_2FLibrary_2FApplication_20Support_2Ftypora-user-images_2Fimage-20231016164019235.png_pos_id_img-eF1Swv53-1697445916780]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/88b9ffb1db614696a70d2aec109017ad.png
[Screenshot_2023-10-16-16-40-48-92_85a2c6e718c04c836aaa40a26ea60b9a]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/7c2eaa956cb44a17a9450e78754dd2ed.png
[889231b5676b4449b1cb9a86f71e8a10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/09e87404cfc34e9098414d9e7ecafc09.png