React Native入门笔记

854 阅读1分钟

React Native 笔记

vscode 插件

  • Prettier - Code formatter
  • React Native Snippet

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 // 关闭全部黄色警告

常用组件汇总

www.jianshu.com/p/53ff78168…

reactnative.dev/docs/more-r…

设计稿px单位转换为手机dp

  • 公式

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

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

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错误的原因

image.png

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

  • 参考

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