---

title: React Native
tags:

• React Native

---

React Native笔记

vscode 插件

• Prettier - Code formatter
• Simple React Snippets

React Native基础命令

#打开手机debug模式
adb shell input keyevent 82

# React Native 脚手架
npm install -g react-native-cli

#初始化一个新的项目
npx react-native init your-app 

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

# 启动项目
npx react-native run-android
#查看设备
adb devices  

小技巧

修改入口文件index.js

• 在netWork查看网络请求

GLOBAL.originalXMLHttpRequest引用XHR的Chrome开发工具副本。由RN提供，作为逃生舱口。Shvetusya的解决方案仅在开发工具处于打开状态并提供XMLHttpRequest时才有效。

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

• 关闭黄色警告

// 关闭黄色警告
console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please use BackHandler instead.','source.uri should not be an empty string','Invalid props.style key'];
console.disableYellowBox = true // 关闭全部黄色警告

常用组件汇总

https://www.jianshu.com/p/53ff78168acc

https://reactnative.dev/docs/more-resources

设计稿 单位转换为手机

• 公式

设计稿宽度/元素的宽度 = 手机屏幕的宽度 / 手机中元素的宽度

手机中元素的宽度= 手机屏幕的宽度 * 元素的宽度 / 设计稿的宽度

Genymotion报错

react-native启动时红屏报错：Unable to load script.Make sure you’re either running a metro server or that …

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 

打包APK

打包APK
keytool 错误: java.io.FileNotFoundException: MyAndroidKey.keystore (拒绝访问).

.\keytool -genkeypair -v -keystore d:/social_app.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

• Warning:
  JKS 密钥库使用专用格式。建议使用 “keytool -importkeystore -srckeystore d:/my-release-key.keystore -destkeystore d:/my-release-key.keystore -deststoretype pkcs12” 迁移到行业标准格式 PKCS12。

React Native Component ExceptionElement

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ams5tL6S-1616911604903)(./Component_Excepthon.png)]

• 在引入组件时不要 加 {}

参考

React Native Component Exception - Element Type is invalid: expected string…got undefined

禁用冒泡