Skip to content

仿 Bilibili 开发的短视频客户端,试用React Native 开发。实现了一套代码同时运行在安卓、苹果、浏览器三端共享。特色功能有美女视频直播,社区交流,视频分类,高清无码不卡顿!

adymilk/ReactNative-video

Repository files navigation

软件名称:昕视界

项目介绍

1、React Native 开发的跨平台APP

2、视频接口来源于网络

3、代码开源,供有需要的同学学习和参考

新特性

[ ] 1、视频评论 [ ] 2、视频弹幕 [ ] 3、视频历史记录 [ ] 4、用户上传视频

开发笔记

1、自定义 Navigator Header

import Header from "./component/header/Header";

const TabStack = createStackNavigator(
    {
        tabs: MaterialTopTabNavigator,
        VideoPlayDetail: VideoPlayDetail,
        LivePlayOnWebview: LivePlayOnWebview,
        CategoryList: CategoryList,
        Dance: Dance,
        CommunionDetail: CommunionDetail,

    },
    {
        navigationOptions: {
            //重点就在这里,<Header/> 是我自定义的 header
            header: <Header/>,
        },
    }
);

2、更改安卓项目包名后,运行报错 Application adymilk.xinvideohasnotbeenregistered 如图: 图片来源网络

解决方法如下:

打开RN 项目根目录下的 app.json

{
  "name": "adymilk.xinvideo",
  "displayName": "adymilk.xinvideo"
}

我的包名修改后的是 com.adymilk.xinvideo,在这里只需要填写com. 后面的名称即可

3、安卓手机返回键 实现 Webview 网页后退功能

componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    }

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
}


// 获取 webview 事件返回的 canGoBack 属性 , 判断网页是否可以回退
_onNavigationStateChange (navState){
    if(navState.canGoBack){
        global.isBack = true;
    }else{
        global.isBack = false;
    }
}

handleBackPress = () => {
    if (isBack) {
        this.refs['webView'].goBack();
        return true;
    }
}
    
render() {
        return (
            <WebView
                ref="webView"
                source={{uri: 视频播放链接}}
                onNavigationStateChange={this._onNavigationStateChange}
            />
        );
    }

代码要点解析

ref="webView" 相当于 class="webView 这样来理解会比较容易。 然后在 RN 生命周期 componentDidMountcomponentWillUnmount 中调用 handleBackPress 方法。 通过 this.refs['webView'].goBack(); 网页就可以通过安卓返回键实现返回了。

About

仿 Bilibili 开发的短视频客户端,试用React Native 开发。实现了一套代码同时运行在安卓、苹果、浏览器三端共享。特色功能有美女视频直播,社区交流,视频分类,高清无码不卡顿!

Resources

Security policy

Stars

Watchers

Forks

Packages

No packages published