All Projects → FTD-ZF → ReactNativeSagaFrame

FTD-ZF / ReactNativeSagaFrame

Licence: other
RN开发(一切尽在代码中)

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to ReactNativeSagaFrame

React Native Feature Boilerplate
Feature based Architecture for developing Scalable React Native Apps 🚀 using react, redux, sagas and hooks
Stars: ✭ 139 (+969.23%)
Mutual labels:  react-navigation, redux-saga, react-redux
React Native Boilerplate
🚀 Type Based Architecture for developing React Native Apps using react, redux, sagas and hooks with auth flow
Stars: ✭ 375 (+2784.62%)
Mutual labels:  react-navigation, redux-saga, react-redux
isomorphic-react-redux-saga-ssr
Isomorphic, React, Redux, Saga, Server Side rendering, Hot Module Reloading, Ducks, Code Splitting
Stars: ✭ 19 (+46.15%)
Mutual labels:  redux-saga, react-redux
admin-template-for-react
🌏 Admin template for React, React Redux, Redux Saga, React Router, i18n and integrated OAuth login
Stars: ✭ 83 (+538.46%)
Mutual labels:  redux-saga, react-redux
auth-with-saga-example
code for https://medium.com/@stepankuzmin/authentication-with-react-router-redux-5-x-and-redux-saga-55da66b54be7
Stars: ✭ 14 (+7.69%)
Mutual labels:  redux-saga, react-redux
hbb-survey-app
Hatay Municipality Survey Application
Stars: ✭ 18 (+38.46%)
Mutual labels:  react-navigation, redux-saga
delivery-app-mobile
🍕React Native food delivery app
Stars: ✭ 143 (+1000%)
Mutual labels:  react-navigation, redux-saga
react-native-boilerplate
Expo + Redux + React Navigation Pre-setup Template (expo SDK 44)
Stars: ✭ 142 (+992.31%)
Mutual labels:  react-navigation, react-redux
rapid-react
A light weight interactive CLI Automation Tool 🛠️ for rapid scaffolding of tailored React apps with Create React App under the hood.
Stars: ✭ 73 (+461.54%)
Mutual labels:  redux-saga, react-redux
redux-saga-rn-alert
Alert.alert()-Support for side effects with redux-saga in react-native-apps
Stars: ✭ 23 (+76.92%)
Mutual labels:  redux-saga, react-redux
react native app start kit
a react-native app template
Stars: ✭ 11 (-15.38%)
Mutual labels:  react-navigation, redux-saga
SHOPMATE
front-end e-commerce system
Stars: ✭ 12 (-7.69%)
Mutual labels:  redux-saga, react-redux
OneArtical
learning and practice redux,react-redux,redux-saga,redux-persist,redux-thunk and so on
Stars: ✭ 61 (+369.23%)
Mutual labels:  redux-saga, react-redux
laravel-react-boilerplate
Laravel React Boilerplate with Ant Design, Route-Level Code Splitting, Redux, Sanctum Auth
Stars: ✭ 49 (+276.92%)
Mutual labels:  redux-saga, react-redux
react-native-boilerplate
从真实项目中抽离出的一个简单的样板。(A simple boilerplate stripping out of a real project.)
Stars: ✭ 21 (+61.54%)
Mutual labels:  react-navigation, redux-saga
think
Instagram clone using React Native with funcional components, React Hooks, React Navigation 4x and Reactotron debugger
Stars: ✭ 20 (+53.85%)
Mutual labels:  react-navigation, react-redux
Covid19-Stats-IN
This app helps in tracking COVID-19 cases in India using covid19India apis
Stars: ✭ 13 (+0%)
Mutual labels:  react-navigation, react-redux
react-native-boilerplate
React Native Boilerplate - React Native Starter Kits : react-navigation and its dependencies, redux, redux persist and redux thunk, redux toolkit, react native vector icons, react-native async storage
Stars: ✭ 68 (+423.08%)
Mutual labels:  react-navigation, react-redux
DLReactNativeArchitecture
React Native Architecture
Stars: ✭ 18 (+38.46%)
Mutual labels:  react-navigation, react-redux
react-native-boilerplate
🚀 A highly scalable, react-native boilerplate reinforced with react-boilerplate which focus on performance and best practices. 🔥. 💻 🚀 😎 👾 👽
Stars: ✭ 82 (+530.77%)
Mutual labels:  react-navigation, redux-saga

ReactNativeSagaFrame

RN开发(一切尽在代码中)

安装运行(已适配Android和iOS)

React-Native "0.55.3" Android studio版本2.3.3 Xcode最新版
  1. yarn install
  2. react-native run-android or react-native run-ios (另外打包bundle再去原生里运行也是可以的,相关命令已在package.json中配置)

相关问题处理

由于用到的组件在适配Android和iOS中不是很完善,所以需要修改node_modules包中的内容;对于初用RN开发项目的朋友,尽量不要去改这个node_modules包
一开始运行项目出现proptypes相关错误--来自扫描二维码组件问题说明 https://www.jianshu.com/p/8e8bc89bfe2c
  • 安卓端,AS中修改react-native-smart-barcode库中,把RCTCapturePackage文件中createJSModules()方法的@Override注释掉
  • 需要去node_modules包中,修改react-native-smart-barcode中Barcode.js文件,去除本身引用的PropTypes, 重新添加import PropTypes from 'prop-types',如果没有就重新依赖prop-types包
图表组件相关问题处理
  • ECharts设置 需要去node_modules/native-echarts/src/components/ECharts/index.js修改部分代码
  • 禁止显示滑动条和滑动:改为scrollEnabled={Platform.OS === 'ios' ? false : true}和scalesPageToFit={Platform.OS === 'ios' ? false : true}
  • 打包问题:ios暂无,安卓端:将node_modules/native-echarts/src/components/ECharts/tpl.html文件拷贝到安卓项目下面的app/src/main/assets文件夹中,并且修改:source={Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }}
Android和iOS屏幕适配(Android端主要设置沉浸式状态栏,iOS端主要适配iPhoneX系列的屏幕)
  • Android端,在原生MainActivity中设置全屏显示,在react-navigation中的headerStyle设置相关高度,其中用到了StatusBar.currentHeight获取当前Android手机状态栏高度
  • iOS端,由于引用了teaset组件并适配了iPhoneX,此处做iPhone XR,XS Max屏幕适配,此处只做了竖屏适配,依旧在react-navigation的样式中设置即可
图片-音频-视频组件
  • 注意相关权限添加
视频播放
  • 此处用到的组件为视频播放组件react-native-video和横竖屏组件react-native-orientation 视频播放组件中,注意当前RN版本号与react-native-video版本号对应,另外注意网络权限添加 react-native-orientation组件中,注意横竖屏切换时 需要调整相关高度
高德地图定位功能
  • 组件分别是react-native-amap3d和react-native-amap-geolocation
  • 需要去高德开放平台申请key
  • 安卓端根据相关说明进行配置,暂未遇到繁琐问题--Android studio需安装kotlin插件
  • iOS端问题 目前对于地图相关组件,iOS端需要安装CocoaPods
  • xcode基本会遇到node_modules包中third-party相关问题
    解决方式 来自https://github.com/facebook/react-native/issues/19774
    1.项目根目录下cd node_modules/react-native
    2.执行 scripts/ios-install-third-party.sh
    3.接着 cd third-party 再cd glog-0.3.x 这个‘x‘就是看本地的这个glog版本了
    4.最后执行 ./configure
  • 完成CocoaPods安装后,在iOS目录下,配置好Podfile文件,执行pod install 可能会出现问题
    问题1:输出 xcrun -k --sdk iphoneos --show-sdk-path相关内容
    解决方式:来自 https://github.com/facebook/react-native/issues/18408
    执行 sudo xcode-select --switch /Applications/Xcode.app
    然后再次执行 pod install 应该可以解决
    问题2:在解决问题1后,Xcode进行build时可能会报错,还是来自third-party的问题
    输出错误 No member named '__rip' in '__darwin_arm_thread_state64'相关内容
    解决方式 直接点击这个错误指向的代码 把 return (void*)context->PC_FROM_UCONTEXT;改为 return NULL;
    此解决方式来自 https://github.com/facebook/react-native/issues/16106
    问题3: 出现RCTWebSocket 相关问题
    解决方式 进入Build Phases中的 Link Binary With Libraries把libfishhook.a删了再重新加就可以了
极光推送集成
  • 注意ios端证书问题
微信分享功能
  • 使用组件react-native-wechat,Android和iOS需注意原生模块相关文件和代码添加(此处申请的微信开放平台账号只开通了分享功能,登录与支付暂未开通)
热更新集成
  • 此处用的是react-native-code-push,用code-push命令进行部署;
  • code-push安装及注册账号此处就不详细描述了;
  • 以项目为例 code-push app add ReactNativeSagaFrame android react-native 在code-push里面添加一个新的app,这里Android和iOS共用一个key
  • 在根目录App.js中进行相关设置,项目中就不弹出提示框了,设置为再次进入app进行更新,并且强制更新
  • 这里是在Production环境进行热更新,Android端与iOS端注意设置key设置正确
  • 每次更新前,需要先把js打包成 bundle,此处是执行 yarn run bundle-android或者yarn run bundle-ios
  • Android端部署(此处可不设置版本号,执行命令时会自动读取,版本号需设置"x.x.x",Android端设置“versionName”即可,若为生产环境需要指定的,Staging则可以不指定,描述和是否强制更新也可选设置)
  • 执行 code-push release-react ReactNativeSagaFrame android -d Production --des "Android端更新" -m true
  • iOS端部署 此项目由于使用了CocoaPods,注意在Podfile文件中查看配置路径是否正确,并且设置版本号也是"x.x.x";
  • 执行 code-push release-react ReactNativeSagaFrame ios -d Production --des "iOS端更新" -m true
  • 以项目为例查询部署历史 code-push deployment history ReactNativeSagaFrame Production
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].