React Native 入门体验

妖狐艹你老母 2022-11-04 14:25 149阅读 0赞

一、搭建环境

[https://www.react-native.cn/docs/environment-setup\#node-jdk][https_www.react-native.cn_docs_environment-setup_node-jdk]

1. 安装NodeJS

2. 安装JDK

3. 安装Android SDK

二、运行示例程序

1. 创建工程

npx react-native init AwesomeProject

2. 运行工程

npx react-native run-android

FAQ：

1. 项目启动之后   react-native start ，输入 r  命令行显示

**warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.**  
**info Reloading app...**

**解决方案：adb shell input keyevent 82   **然后在设置里 settings 里面 找到 DEbug server host & port for device  ,输入了主机ip地址和端口号（例如：192.168.0.240:8081）

2. 报错提示：Unable to load script.Make sure you're either running a metro server（ run 'react-native start' ） or that your bundle 'index.android.bundle' is packaged correctly for release.

解决方案：使用命令创建 index.android.bundle

`react-native bundle --platform android --dev``false` `--entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res`

![05070a2a8dc5cfa177a40533a23db9ae.png][]

[https_www.react-native.cn_docs_environment-setup_node-jdk]: https://www.react-native.cn/docs/environment-setup#node-jdk
[05070a2a8dc5cfa177a40533a23db9ae.png]: /images/20221023/8e0b64cf755e45d1bf0541996cbaa55b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关 react native入门

文章目录前言一、react native是什么？二、目录介绍三、使用Android Studio跑起来建议 ----------

Love The Way You Lie/ 2022年11月17日 14:44/ 0 赞/ 130 阅读

相关 React Native 入门体验

一、搭建环境 [https://www.react-native.cn/docs/environment-setup\node-jdk][https_www.react-na

妖狐艹你老母/ 2022年11月04日 14:25/ 0 赞/ 150 阅读

相关 react native

React Native使你能够在Javascript和[React][]的基础上获得完全一致的开发体验，构建世界一流的原生APP。 React Native

朱雀/ 2022年09月24日 14:15/ 0 赞/ 246 阅读

相关 React Native：从入门到原理

![android-weekly-issue-rn600.jpg][] 本文授权转载，作者：bestswifter（[简书][Link 1]） React Native 是

怼烎@/ 2022年09月21日 04:52/ 0 赞/ 177 阅读

相关 React Native

[携程 React Native 实践与性能优化][React Native] [携程火车票业务在 React Native 实践中踩过的坑][React Native 1]

快来打我*/ 2022年07月15日 09:11/ 0 赞/ 161 阅读

相关 React Native 从入门到原理

\[http://www.jianshu.com/p/2ec61e2c00cb\]适合有[iOS][]基础的同学学习 React Native 是最近非常火的一个话

╰半夏微凉°/ 2022年07月11日 13:44/ 0 赞/ 175 阅读

相关 react-native

react-native 资料整理： react-native官网：[http://facebook.github.io/react-native/][http_faceb

た入场券/ 2022年07月10日 04:56/ 0 赞/ 197 阅读

相关 React Native入门路线

2019-02-11 1、npm、yarn基本命令。React Native调试的基本命令。 2、Flexbox布局（弹性盒子布局）：页面组件的布局。 3、prop

谁借莪１个温暖的怀抱￠/ 2022年03月19日 06:13/ 0 赞/ 149 阅读

相关 React Native

官网：[https://reactnative.cn/][https_reactnative.cn] [https_reactnative.cn]: https://rea

你的名字/ 2022年03月12日 05:25/ 0 赞/ 187 阅读

相关 React Native react-native-video 视频库

> RN 项目安装 react-native-video 视频库安装 react-native-video yarn add react-native-

不念不忘少年蓝@/ 2021年11月11日 07:04/ 0 赞/ 291 阅读