React Native从零开始构建项目（2019）

环境搭建，参考官网

https://reactnative.cn/

安装 Xcode Android Studio

目的，实现本地热重载开发，使用vsCode

运行失败，重新执行react-native init Demo

 

//生成 ios 离线包

mkdir release_ios

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output releaseios/index.jsbundle --assets-dest releaseios/

删除多余 target 包，再打包即为离线包

 

 

//生成 android 离线包

安卓生成秘钥：

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

口令：my-key-alias

姓: 李

单位： 赛尔

组织：赛尔

区域：北京

省：北京

代号：86

参考：

https://www.cnblogs.com/shaoting/p/7117454.html

 

cd 到 android 目录，运行

./gradlew assembleRelease

下面目录有安卓包

/app/build/outputs/apk/

 

热更新

https://github.com/reactnativecn/react-native-pushy/blob/master/docs/guide.md

选择应用

pushy selectApp --platform ios/android

发布ios应用

pushy uploadIpa < your-package.ipa >

发布安卓包

pushy uploadApk android/app/build/outputs/apk/release/app-release.apk

发布热更新

pushy bundle --platform < ios | android >

官方网站

https://update.reactnative.cn/home

 

安装 react-navigation

https://reactnavigation.org/docs/zh-Hans/navigating.html

 

react-native-vector-icons 图标

https://oblador.github.io/react-native-vector-icons/

 

自定义字体图标

https://www.jianshu.com/p/332198bf46a7

node_modules/react-native-vector-icons目录

 

 

安卓报错

错误: 程序包android.support.v4.util不存在

https://github.com/facebook/react-native/issues/25483

 

ReactNative三方组件汇总

https://blog.csdn.net/xiangzhihong8/article/details/81812418

 

保证安卓和ios风格统一

https://www.jianshu.com/p/3e34e4429284

 

集成redux

https://www.jianshu.com/p/25d8b06ead06

 

谷歌浏览器调试js

http://127.0.0.1:8081/debugger-ui/

 

css屏幕适配

https://www.jianshu.com/p/06675dddcdba

 

去掉底部关于remote debugger黄色提示

https://blog.csdn.net/qq_38719039/article/details/80226103 

 

启动图

yarn add react-native-splash-screen  

注意！:ios需要cd ios/,  运行pod install下载库, 然后building setting -> header search paths -> 添加 "${PODS_ROOT}/Headers/Public/react-native-splash-screen”

    AppDelegate.m添加代码  

     #import "RNSplashScreen.h"     //引入头文件

     ...

     [ self. window makeKeyAndVisible];

     [ RNSplashScreen show];   // 启动后进入启动页

      return YES;

     ...

 

 

每次安装完插件，node_modules文件字体文件会丢失，执行

cp android/app/src/main/assets/fonts/IconFont.ttf node_modules/react-native-vector-icons/Fonts/

 

本地存储

async-storage

https://github.com/react-native-community/async-storage

yarn add @react-native-community/async-storage