【React Native 一】零基础搭建demo

lucky_hahaha

已于 2025-03-03 14:23:11 修改

阅读量718

点赞数 7

分类专栏：前端（移动端网页端）文章标签： react native react.js javascript

于 2025-03-03 14:22:09 首次发布

本文链接：https://blog.csdn.net/lucky_hahaha/article/details/136932529

版权

前端（移动端网页端）专栏收录该内容

5 篇文章

订阅专栏

React Native version: 0.73
环境： nvm: 1.1.12 (nvm list available可查看node可安装版本) node: 20.10.0 java: 17.0.10

创建项目：npx react-native@latest init AwesomeProject
运行项目：npx react-native run-android
[1]　用Android Studio里创建虚拟设备
[2]　用mumu模拟器连接电脑　先打开mumu模拟器　然后打开开发者模式里的USB调试　然后控制台运行adb connect 127.0.0.1:7555 然后运行adb devices显示设备　然后在VSCode里用命令npx react-native run-android运行项目　就成功啦
3.（1）调试官网参考
命令启动react-devtools之后出来如下弹窗，

（2）打android包：官网参考
打包完的apk包在xx\ProjectName\android\app\build\outputs\apk
遇到问题：
[1] Could not find method debug() for arguments [build_tf4f59qcoffrkobgp15qeykk $_run_closure2$ _closure5 $_closure7@73195afd, SigningConfig$ AgpDecorated_Decorated{name=release, storeFile=null, storePassword=null,
keyAlias=null, keyPassword=null, storeType=pkcs12, v1SigningEnabled=true, v2SigningEnabled=true, enableV1Signing=null, enableV2Signing=null, enableV3Signing=null, enableV4Signing=null}] on SigningConfig container of type org.gradle.api.internal.FactoryNamedDomainObjectContainer.
解决：从Android Studio打开android，配置项目gradle发现gradle版本太低，于是下载了新的gradle版本
在这里插入图片描述

遇到问题：
(1) 如果下载node有问题，例如：npm -v, npx -v或者执行npm npx遇到问题npm ERR! Unexpected token ‘.‘ 等，如果用的nvm安装的node.则更新nvm到最新版，可解决大部分问题。nvm更新方法，如果本地有旧版本的nvm,则可通过nvm github下载nvm-update.zip 解压点击exe执行文件更行就行不用卸载原来的nvm. 这个更新方式会保留本地的node环境。
在这里插入图片描述
(2) 拓展命令： npx react-native doctor 检查本地环境

初次写遇到的语法：

无参数 onPress={test}
有参数 [1] onPress={()=>test(param)} [2] onPress={handlePress.bind(this, ‘anotherParam’)} [3] 状态管理

const [count, setCount] = useState(0);
const incrementCount = () => {
    setCount(count + 1);
  };    <Button title="Increment" onPress={incrementCount} />