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


    创建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
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    也可以先直接卸载

    npm uninstall -g react-native-cli
    
    • 1

    正常安装过程:

    1. 安装react-native-cli
    npm install -g react-native-cli
    
    • 1
    1. 安装react-native
    npm install -g react-native
    
    • 1

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

    npx react-native init firstRNProject
    
    • 1

    就会出现下述的界面

    image-20231016110848723

    安装编译到Android手机上去

    react-native run-android
    
    • 1

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

    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
    • 启动后报错提示报错信息如下
      在这里插入图片描述
      参考https://github.com/facebook/react-native/issues/21530,清除缓存重新npm install安装新的依赖包解决
      react-native start --reset-cache
      react-native run-android
  • 相关阅读:
    LLM大模型量化原理
    《家的温暖,国庆团圆》
    nvm下node安装;node环境变量配置
    linux异步IO通知
    【附源码】Python计算机毕业设计商场VIP管理系统
    Java设计模式
    (附源码)ssm旅游公司网站 毕业设计 201105
    在nodejs常见的不良做法及其优化解决方案
    MATLAB中syms函数使用
    Rocky Linux安装Docker
  • 原文地址:https://blog.csdn.net/qq_41688840/article/details/133862196