AndroidToRN

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

★ 98 Open GitHub ↗

原生android中嵌入React Native

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# AndroidToRN
1:原生android中嵌入React Native 
2:封装原生view,viewgroup,原生module 
3:使用codepush热更新 
4:react navigation自定义tab实现凸起 
5:下拉刷新+无限列表+大量图片 
6:statusbar颜色+图片 
7:modal通过原生popwindow实现全屏,解决status覆盖问题 
8:集成redux

# 环境：
Android studio3.0 
react native 0.55.4 
Mac 10.12.6 
# 如有问题或者需要我添加什么请提issue，我会去实现的 
 
CSDN：[http://blog.csdn.net/u014041033?viewmode=contents](http://blog.csdn.net/u014041033?viewmode=contents) 
简书：[简书](http://www.jianshu.com/u/1386d6b454e5)

项目下载后 
1: cd testApp 
2: yarn install 
3: npm start 
4: android studio打开项目testApp 报错 
![buildbug.png](http://upload-images.jianshu.io/upload_images/3353755-9b998a898ab7e1c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 
5：按照[codepush3之Android原生引用集成codepush](http://blog.csdn.net/u014041033/article/details/79004351)所示修改路径 
或者如下修改 
change react.gradle的14行reactRoot路径 
![reactbuild.png](http://upload-images.jianshu.io/upload_images/3353755-3ff148637def7335.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 
6：andorid studio 运行项目即可

# ChangeLog: 
1.0.6 
![modalAndroid.gif](http://upload-images.jianshu.io/upload_images/3353755-99d956849f6f4663.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![image.png](https://upload-images.jianshu.io/upload_images/3353755-cdb0a664d7d5be47.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1.0.5 
原生下拉刷新+大列表(Flatlist||SGListView)+大量图片 不会卡顿 
![largerlist.gif](http://upload-images.jianshu.io/upload_images/3353755-e8a7c8549d7b068b.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1.0.4 
1:新增pullLayout->此组件是原生下拉刷新组件的封装（因为android下拉刷新组件一直存在性能问题所以自己封装了一个） 
组件基于[SmartRefreshLayout](https://github.com/wuyunqiang/react-native-pullview)仅限Android使用 
效果如下： 
![nativepull.gif](http://upload-images.jianshu.io/upload_images/3353755-0fc729d83bd19655.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1.0.3 
1：添加下拉刷新[react-native-pullview](https://github.com/wuyunqiang/react-native-pullview) 
2：添加自定义Tab 
效果： 
![pullview.gif](http://upload-images.jianshu.io/upload_images/3353755-2d90319bf4a5e3a8.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![custometab.gif](http://upload-images.jianshu.io/upload_images/3353755-b52dce1ac265ae4b.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1.0.2 
纯原生->一半rn一半原生->纯rn 
效果： 
![nativetiRN.gif](http://upload-images.jianshu.io/upload_images/3353755-2db0558b7af4f3d1.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1.0.1 
1:添加react navigation可以跳转页面 
2:添加code push(bug fixed) 有关codepush问题https://github.com/wuyunqiang/ReactNativeUtil/issues/26 
3:优化添加预加载reactnative页面 (参考：https://github.com/songxiaoliang/ReactNativeApp)

运行效果： 
![androidtoRN.gif](http://upload-images.jianshu.io/upload_images/3353755-e91c00dcdaec7956.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
代码仅供参考：
如要运行，需要下载node_modules。
另外本人在学习的过程中遇到很多坑，深知找解决问题的路途艰难险阻
所以我正在做一个收集react native的bug解决+工具的库，
希望可以帮助大家在学习中更有效率的写代码。 
详情[ReactNativeUtil](https://github.com/wuyunqiang/ReactNativeUtil) 
通过label搜索关键字,也欢迎大家丰富内容。

AndroidToRN

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README