react-native使用初探

1. 搭建开发环境
  1. 安装 Node12.x, Python2.x, java JDK 1.8
  2. Android 开发环境
  3. 创建新项目
npx react-native init AwesomeProject
  1. 打开安卓模拟器
  2. 编译并运行 React Native 应用
cd AwesomeProject
yarn react-native run-android --port=8082
  1. 打包：
cd android
./gradlew assembleRelease

RN默认会使用8081端口，因此如果电脑上有软件占用8081端口会导致启动失败
windows下查找占用指定端口的应用程序方法如下：

  1. 找到pid 3792

  2. 根据pid找到占用的软件
    这里我们发现占用程序是杀毒软件迈克菲


    360截图20200403153551197.jpg
2. RN 调试
  1. 点击模拟器下的菜单 (快捷键呼起 Ctrl+M)
  2. 点击debugging，会自动在谷歌浏览器打开http://localhost:8082/debugger-ui/
  3. 切换到审查模式,可以审查元素状态，配合下面的开发工具还可以看到节点和属性
  4. 使用独立的react-devtools开发工具
//全局安装
npm install -g react-devtools
//运行
react-devtools

很快就能连上模拟器,如果没有连接上，切换点击菜单的debugging按钮

  1. 在谷歌浏览器调试时，还可以查看组件的属性和状态:
  1. 首先在react-devtools面板选中节点,然后在控制台选择debuggerWorker.js,
    最后输入$r，打印出组件实例
360截图20200403154218086.jpg

360截图20200403154907374.jpg
360截图20200403154930554.jpg
介绍另外一个RN调试利器 react-native-debugger

下载安装后,双击打开exe程序，默认连接8081端口，可以通过修改配置文件：


360截图20200408090910957.jpg
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容