影戏天国React Native 客户端V2.0宣布

2019年8月20日 264次阅读 来源: XboxYan

影戏天国React Native 客户端

重新开始！

详细更新以https://github.com/XboxYan/DYTT为准。

重新开始

两年前宣布了第一个版本。

如今，

运用最新的react-native 0.57和全新的设想完成了V2.0

免责声明

本项目仅供进修交换运用，不得用于其他商业行为，数据来源于第三方网站，与本人无关

为何要重新开始呢

有很多小伙伴发邮件问我为何之前的项目运转不起来。

实在这个是我本身的缘由，之前做的时刻没什么履历，很多时刻就直接修正了第三方库，所以就运转不起来了

另有就是第三方api也做了很大的更改

react-native和其他第三方库都更新了很多，恰好重新开始，把一些新特征都应用起来（比方context），完全的来做一个项目，这比纯真的进修看文章要有用的多

一般的app原本就是须要历久保护更新的，只不过由因此个人项目，很多时刻完成一个阶段就会因为种种缘由而被延宕，精力有限实属无奈

特征

大概是全网个人影视类项目最美丽、体验最好的了吧（下方有截图~）。

最为一位偏体验偏设想的前端开发者，对界面和用户体验都有极高的注重。

（见过很多相似的，功用算是出来了，然则界面一看就是程序员作风）

演示视频

项目依靠

依靠项不多，大部分都是用原生自带组件完成

{
  "name": "DYTT",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.5",
    "react-native-gesture-handler": "^1.0.9",
    "react-native-scrollviewpager": "^1.0.3",
    "react-native-splash-screen": "^3.1.1",
    "react-native-swiper": "^1.5.14",
    "react-native-vector-icons": "^6.1.0",
    "react-native-video": "^4.0.1",
    "react-navigation": "^3.0.0"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.2",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

装置

github 项目地点

本项目适用于相干技术人员进修交换，请自行编译装置

git clone https://github.com/XboxYan/DYTT.git

cd DYTT

yarn

react-native run-android

下载

现在只要安卓版本下载，须要ios的能够自行编译装置

下载链接

二维码

（微信扫码能够不支持，发起用其他扫描东西或许直接用浏览器翻开上面链接）

考虑到安全问题，暂不供应装置包，可经由过程上述体式格局装置，或许与我联络供应装置包

相干截图

迎接页

《影戏天国React Native 客户端V2.0宣布》

首页

《影戏天国React Native 客户端V2.0宣布》

功用菜单

《影戏天国React Native 客户端V2.0宣布》

历史纪录

《影戏天国React Native 客户端V2.0宣布》

珍藏

《影戏天国React Native 客户端V2.0宣布》

主题色彩

《影戏天国React Native 客户端V2.0宣布》

搜刮

《影戏天国React Native 客户端V2.0宣布》

搜刮结果

《影戏天国React Native 客户端V2.0宣布》

影片挑选

《影戏天国React Native 客户端V2.0宣布》

影片概况

《影戏天国React Native 客户端V2.0宣布》

影片播放

《影戏天国React Native 客户端V2.0宣布》

更新纪录

纪录一些页面的症结点

20181123

运用react-navigation作为导航

/App.js

因为新版导航用到了原生手势库，所以须要

yarn add react-native-gesture-handler

react-native link react-native-gesture-handler

团体导航构造以下

const Drawer = createDrawerNavigator({
    Index: Index,
    History: History,
    Follow: Follow,
    Theme: Theme,
},DrawerNavigatorConfig);

const App = createAppContainer(createStackNavigator({
    Drawer: Drawer,
    Search: Search,
    MovieContent: MovieContent,
    MovieDetail: MovieDetail,
    Comment: Comment,
}, StackNavigatorConfig));

tab切换运用的是本人封装导航器react-native-scrollviewpager

https://github.com/XboxYan/react-native-scrollviewpager

有兴致的能够给个star

运用体式格局比较简单

yarn add react-native-scrollviewpager

import Scrollviewpager from 'react-native-scrollviewpager';

const tabBarOptions = (themeColor) => ({
    style:{
        paddingHorizontal:10,
        height:40,
        backgroundColor:'#fff'
    },
    labelStyle:{
        color:'#666'
    },
    activeTintColor:themeColor,
    indicatorStyle:{
        width:20,
        borderRadius:4,
        height:3,
        backgroundColor:themeColor,
        bottom:2
    }
})

//
<Scrollviewpager tabBarOptions={tabBarOptions(themeColor)} >
    <Text tablabel="首页">111</Text>
    <Text tablabel="影戏">111</Text>
    <Text tablabel="动漫">111</Text>
</Scrollviewpager> 
//

20181125

运用context治理全局数据

/util/store.js

历史纪录，珍藏，主题（烧毁，下面有其他体式格局完成）

export const Store = createContext(initialStore);

<Store.Provider value={{
    ...initialStore
}}>
    {this.props.children}
</Store.Provider>

20181127

影视概况页面

./src/page/MovieDetail.js

头部转动追随结果运用Animated.ScrollView完成

scrollTop = new Animated.Value(0);

//...
<Animated.ScrollView
    scrollEventThrottle={1}
    onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: this.scrollTop } } }],
        { useNativeDriver: true }
    )}
>
</Animated.ScrollView>
//...

视频播放器自定义表面

./src/components/Video.js

运用开源播放器react-native-video

https://github.com/react-native-community/react-native-video

这里有一个bug

source={{uri:uri}}，uri不能为空字符串，不然切换资源部见效

支持手势快进快退，自动隐藏播放栏

  • 还未完成的功用

全屏切换

20181203

主题色彩

./App.js、./src/page/Theme.js

react-navigation内置属性screenProps，其道理依然运用的context特征

<App screenProps={{themeColor:themeColor, setTheme:this.setTheme}} />

挪用体式格局

const {navigation,screenProps:{themeColor}} = this.props;

20181204

历史纪录

./src/page/History.js

经由过程context通报数据，需设置contextType

import { Store } from '../../util/store';
export default class History extends PureComponent {
    render() {
        const { historyList } = this.context;
        return (
            //...
        )
    }
}
History.contextType = Store;

20181205

珍藏页面

./src/page/Follow.js

与’历史纪录’基础一致

20181206

当地存储

./util/storage.js

运用原生AsyncStorage

class Storage {
    /**
     * 猎取
     */

    static get = async (key) => {
        try {
            const value = await AsyncStorage.getItem(key);
            if (value !== null) {
                // We have data!!
                return JSON.parse(value)
            } else {
                return false
            }
        } catch (error) {
            return false
        }
    }

    /**
     * 保留
     */
    static save = async (key, value) => {
        try {
            await AsyncStorage.setItem(key, JSON.stringify(value));
            return true
        } catch (error) {
            // Error saving data
            return false
        }
    }
}

export default Storage;

20181209

搜刮

./src/page/Search.js

20181211

影片挑选

./src/page/MovieContent.js

运用侧边导航栏，挪用体式格局与原生DrawerLayoutAndroid一致

import DrawerLayout from 'react-native-gesture-handler/DrawerLayout';

20181214

图标，启动图

运用开源库react-native-splash-screen

https://github.com/crazycodeboy/react-native-splash-screen#readme

假如须要白底深色的状态栏笔墨

<style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="colorPrimaryDark">@color/status_bar_color</item>
    <item name="android:windowLightStatusBar">true</item><!--加上这一句-->
</style>

2.0 基础完成

20181217

安卓打包

./android/build.gradle

修正一下设置

解释jcenter()，增加

maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'}
maven{ url 'https://jitpack.io' }

不然会卡在下载阶段

...
allprojects {
    repositories {
        mavenLocal()
        google()
        //jcenter()
        //替换国内镜像
        maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'}
        maven{ url 'https://jitpack.io' }
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}
...

常用命令

# 卸载装置包
adb uninstall com.packgeName

# 天生Release包
gradlew assembleRelease

# 装置Release包
gradlew installRelease

注重：在 debug 和 release 版本间往返切换装置时能够会报错署名不婚配，此时须要先卸载前一个版本再尝试装置。

可经由过程 adb uninstall com.packgeName 体式格局来卸载，直接经由过程长按桌面图标有能够卸载不清洁

还未完成的还接下来要做的

  • 视频播放做全屏切换
  • 没有适配ios，不过代码中没有运用安卓专有的库，理论上能够直接运转（能够有少部分须要适配），有兴致的小伙伴能够fork下来本身适配一下
  • 会新增设置选项，举行收集设置，播放设置等（会参考其他视频软件的功用）
  • 现在历史纪录和珍藏均保留在当地，意味着假如卸载app将致使数据丧失，假如能够的话，未来把数据保留在本身的效劳器上
  • react-navigation在页面切换时稍微卡顿，另有一个react-native-navigation，假如能够的话，能够用来替换react-navigation
  • 现在在网上找的api能够不够抱负，假如谁有更好的设想和更好的api能够参考一下~假如有供应背景效劳的就更好了
  • react-native确切机能略显不足，特别是长列表的状况，预备进修flutter，一种新的衬着体式格局（相似于web中的canvas）

联络体式格局

有什么问题能够与我联络

yanwenbin1991@live.com

或许直接提 issue

原文地点

https://blog.codelabo.cn/article/5c18911f8aab210ff34d0147

https://github.com/XboxYan/DYTT

打赏

精力支持一下，给个 star 呗

假如体验以为还不错的话，大佬们能够随便打赏，金额不限

《影戏天国React Native 客户端V2.0宣布》

    原文作者：XboxYan
    原文地址: https://segmentfault.com/a/1190000017414475
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞