美文网首页React Native资料汇总React NativeReact-Native
react-native低仿映客直播客户端 支持iOS/Andr

react-native低仿映客直播客户端 支持iOS/Andr

作者: 离人萧 | 来源:发表于2017-09-12 01:17 被阅读2348次

GitHub:https://github.com/tion126/RNLive

没错,就是低仿~


上几张图先:

这张脸太多就不码了,要是不小心截到哪位老铁的女票我马上删

基于0.44.3版本,还算是比较稳定。目前公司的项目也是基于这个版本。
使用的框架有这些

"react-native-scrollable-tab-view": "^0.6.7",
"react-native-swiper": "^1.5.10",
"react-redux": "^5.0.6",
"redux": "^3.6.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"shimo-navigation": "0.0.12"

其他框架大家应该都用过了,最后那个shimo-navigation是对石墨文档公司开源的一个基于react-navigation 的导航系统,还是挺好用的。

这个是react-native 的目录结构


这个是项目的目录结构


这里说说我个人对RN的看法:
RN性能说句实话还是和原生有差距,但是性能不是特别敏感的情况下RN还是很犀利的。比如可以代替一些以前用H5实现的页面,还有频繁更新的业务也可以用他来构建,纯RN项目就不太可行了,除非是非常轻量级的APP。so,对于大多数项目还是混合比较好,就比如这个低仿demo,直播页面播放的画面使用原生实现,但是礼物是用RN实现。还有一点,RN在老旧低端机上表现只能说是差强人意,但是老旧机型迟早是会淘汰的,在较新的机型上RN的表现还是比较出色,比如用iPhone7大多数页面我已经感觉不出和原生有啥区别了,而iPhone7也不是新🐔,毕竟明天iPhone8(x edition 7s ?...)就要发布了。

iOS这边是手动建的工程,然后通过cocoapods把RN框架集成到项目中,也算是模拟老项目集成RN了。毕竟现在新项目比较少,大多数老铁都是维护老项目,推翻重写也不太现实。推流用的LFLiveKit 播放用的IJK。Android这边只写了播放,用的是7牛的框架,手头没安卓的设备,推流就没搞了,不过这些去年都被别人写烂了,也没啥好说的了。安卓这边和iOS还有一些区别,模拟器不是很好用就没完善了。

推荐使用WebStorm运行,VSCode也可以。


运行方式
cd到 react-native目录

npm install

iOS
因为github传不了100m以上的文件,ijk已经100多m了,需要另外下载
下载解压后放置在图中目录即可
链接: https://pan.baidu.com/s/1miedota 密码: af6i

工程目录

pod install

|
|
v
运行
Android
直接运行


如果你喜欢我的项目/或者我的文章可以给我个star!
GitHub:https://github.com/tion126/RNLive

欢迎下方留言讨论

相关文章

网友评论

  • 45102f76efc4:libPods-RNLive.a这个库没有。。。
  • 華仔_024a:按照文档说的操作,在Xcode运行,出现红屏,然后发现工程中没有bundel文件,只有一个appdelegate和viewcontroller那个东西,然后我看你文档说直播用的是原生写的,也没有看到有其他的原生代码,难道是我哪里搞错了.:smiley:
  • 贝塔有点萌:马赛克笑死:joy:
  • 雪晨杰:这个在win下是不是跑不起来
  • 51e80f9120b1:老板,我用npm install下载了一些依赖后,在输入命令react-native run-android,报错说android project not found,到哪去修改啊?
  • 呵呵19048:xcode运行项目报错,怎么解?
    Apple Mach-O Linker Error Group:
    clang: error: linker command failed with exit code 1 (use -v to see invocation)
    ld: warning: directory not found for option '-L/Users/zhaowei/Library/Developer/Xcode/DerivedData/RNLive-crlzsblehdctziaprqluiodckouy/Build/Products/Debug-iphonesimulator/NativeComponent'
    ld: warning: directory not found for option '-L/Users/zhaowei/Library/Developer/Xcode/DerivedData/RNLive-crlzsblehdctziaprqluiodckouy/Build/Products/Debug-iphonesimulator/React'
    ld: warning: directory not found for option '-L/Users/zhaowei/Library/Developer/Xcode/DerivedData/RNLive-crlzsblehdctziaprqluiodckouy/Build/Products/Debug-iphonesimulator/Yoga'
    ld: library not found for -lNativeComponent
    clang: error: linker command failed with exit code 1 (use -v to see invocation)
    45102f76efc4:我也这个问题。
  • c893b5bd6857:android打包出错
    sed: can't read s/#import <RCTAnimation/RCTValueAnimatedNode.h>/#import "R
    CTValueAnimatedNode.h"/: No such file or directory
    sed: can't read s/return <List {...this.props} />;/return <List {...this.pro
    ps} ref={(virtualizedSectionList) =>{this._virtualizedSectionList = virtualized
    SectionList}} />;/: No such file or directory
    sed: can't read s/return <VirtualizedList {...this.state.childProps} />;/retu
    rn <VirtualizedList {...this.state.childProps} ref={(virtualizedList) =>{this.
    _virtualizedList = virtualizedList}} />;/: No such file or directory
    sed: can't read s/react-navigation/src/views/CardStack'/react-navigation/
    src/views/CardStack/CardStack'/: No such file or directory
    sed: can't read s/react-navigation/src/views/TransitionConfigs'/react-navi
    gation/src/views/CardStack/TransitionConfigs'/: No such file or directory
    sed: can't read s/react-navigation/src/views/Header'/react-navigation/src
    /views/Header/Header'/: No such file or directory
    sed: can't read s/react-navigation/src/views/HeaderStyleInterpolator'/react
    -navigation/src/views/Header/HeaderStyleInterpolator'/: No such file or di
    rectory
    sed: can't read s/react-navigation/src/views/CardStackTransitioner'/react-
    navigation/src/views/CardStack/CardStackTransitioner'/: No such file or dir
    ectory
    135ff578db08:@吴敏牛逼 这个库的路径变了 把路径改一下应该就不会报错了
  • 栀夏暖阳:不搞了,太费劲
  • 栀夏暖阳:项目总是报错,其实还是需要自己重构,楼主提供的包,有点问题。
    栀夏暖阳:@离人萧 哥,我react-native写了两个项目了,不过技术特别菜。:stuck_out_tongue_winking_eye::stuck_out_tongue_winking_eye::stuck_out_tongue_winking_eye::stuck_out_tongue_winking_eye:
    离人萧:这就尴尬了, 如果以前没运行过react-native项目可以先看看 http://reactnative.cn/docs/0.51/getting-started.html
  • 紫瞳:大神为什么我第一次进入react-native的文件夹下运行 npm install 会出现这个错误: Failed at the RNLive@0.0.1 postinstall script 'sed -i '' 's/#import <RCTAnimation\/RCTValueAnimatedNode.h>/#import "RCTValueAnimatedNode.h"/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h'.
    离人萧:@紫瞳之眸 昨天有更新 代码放在单独的文件里了 可以更新试试
    紫瞳:@离人萧 谢谢了 我试试
    离人萧:0.44.3iOS有个头文件路径不对需要修改,所以加了这行代码。 这个是写在package.json里面的 可能和环境有关吧。 你可以先删了试试,或者放在一个单独的文件里。
  • 出门右转掘金见:配图是最骚的:smile:
  • 2ca391135ec0:Android试了几次都不行.. 唉
  • f48ac133a97f:下载之后,配置好运行出现了。has not been registered。是不是es6得语法的原因了。。。。:fearful:
    离人萧:你是安卓的么 目测你没填你自己的ip
  • fangkyi03:好像说了很多,又好像啥都没说😊
    离人萧:去掉好像,就是啥都没说。就和写文档一样,每个功能感觉都没什么好写的。:flushed:
  • 1258fdbb8c98:iOS模拟器运行出现红色的背景,No bundle URL present.错误。
    离人萧:@taylorX 首次运行要配置一下哦 。Edit config。 可以百度一下。
    1258fdbb8c98:@离人萧 用webStorm打开工程,选中iOS,运行出现,Unknown run configuration type ReactNative。
    离人萧:有在react文件夹里react-native start 么 。 iOS在run script里有配置 不过我一般都用WebStorm,所以注释掉了 打开注释应该就可以了

本文标题:react-native低仿映客直播客户端 支持iOS/Andr

本文链接:https://www.haomeiwen.com/subject/msrqsxtx.html