摘要：電影天堂客戶端重新開(kāi)始具體更新以為準(zhǔn)。重新開(kāi)始兩年前發(fā)布了第一個(gè)版本。最為一名偏體驗(yàn)偏設(shè)計(jì)的前端開(kāi)發(fā)者，對(duì)界面和用戶體驗(yàn)都有極高的重視。

電影天堂React Native 客戶端

重新開(kāi)始！

具體更新以https://github.com/XboxYan/DYTT為準(zhǔn)。

兩年前發(fā)布了第一個(gè)版本。

現(xiàn)在，

使用最新的react-native 0.57和全新的設(shè)計(jì)完成了V2.0

本項(xiàng)目?jī)H供學(xué)習(xí)交流使用，不得用于其他商業(yè)行為，數(shù)據(jù)來(lái)源于第三方網(wǎng)站，與本人無(wú)關(guān)

有很多小伙伴發(fā)郵件問(wèn)我為什么之前的項(xiàng)目運(yùn)行不起來(lái)。

其實(shí)這個(gè)是我自己的原因，之前做的時(shí)候沒(méi)什么經(jīng)驗(yàn)，很多時(shí)候就直接修改了第三方庫(kù)，所以就運(yùn)行不起來(lái)了

還有就是第三方api也做了很大的變動(dòng)

react-native和其他第三方庫(kù)都更新了許多，正好重新開(kāi)始，把一些新特性都利用起來(lái)（比如context），完整的來(lái)做一個(gè)項(xiàng)目，這比單純的學(xué)習(xí)看文章要有效的多

正常的app本來(lái)就是需要長(zhǎng)期維護(hù)更新的，只不過(guò)由于是個(gè)人項(xiàng)目，很多時(shí)候完成一個(gè)階段就會(huì)因?yàn)楦鞣N原因而被耽擱，精力有限實(shí)屬無(wú)奈

大概是全網(wǎng)個(gè)人影視類項(xiàng)目最漂亮、體驗(yàn)最好的了吧（下方有截圖~）。

最為一名偏體驗(yàn)偏設(shè)計(jì)的前端開(kāi)發(fā)者，對(duì)界面和用戶體驗(yàn)都有極高的重視。

（見(jiàn)過(guò)很多類似的，功能算是出來(lái)了，但是界面一看就是程序員風(fēng)格）

演示視頻

依賴項(xiàng)不多，大部分都是用原生自帶組件完成

{
  "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 項(xiàng)目地址

本項(xiàng)目適用于相關(guān)技術(shù)人員學(xué)習(xí)交流，請(qǐng)自行編譯安裝

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

cd DYTT

yarn

react-native run-android

目前只有安卓版本下載，需要ios的可以自行編譯安裝

下載鏈接

二維碼

（微信掃碼可能不支持，建議用其他掃描工具或者直接用瀏覽器打開(kāi)上面鏈接）

考慮到安全問(wèn)題，暫不提供安裝包，可通過(guò)上述方式安裝，或者與我聯(lián)系提供安裝包

歡迎頁(yè)

首頁(yè)

功能菜單

歷史記錄

收藏

主題顏色

搜索

搜索結(jié)果

影片篩選

影片詳情

影片播放

記錄一些頁(yè)面的關(guān)鍵點(diǎn)

使用react-navigation作為導(dǎo)航

/App.js

由于新版導(dǎo)航用到了原生手勢(shì)庫(kù)，所以需要

yarn add react-native-gesture-handler

react-native link react-native-gesture-handler

整體導(dǎo)航結(jié)構(gòu)如下

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切換使用的是本人封裝導(dǎo)航器react-native-scrollviewpager

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

有興趣的可以給個(gè)star

使用方式比較簡(jiǎn)單

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
    }
})

//

    111
    111
    111
 
//

使用context管理全局?jǐn)?shù)據(jù)

/util/store.js

歷史記錄，收藏，主題（廢棄，下面有其他方式實(shí)現(xiàn)）

export const Store = createContext(initialStore);


    {this.props.children}

影視詳情頁(yè)面

./src/page/MovieDetail.js

頭部滾動(dòng)跟隨效果使用Animated.ScrollView實(shí)現(xiàn)

scrollTop = new Animated.Value(0);

//...


//...

視頻播放器自定義外觀

./src/components/Video.js

使用開(kāi)源播放器react-native-video

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

這里有一個(gè)bug

source={{uri:uri}}，uri不能為空字符串，否則切換資源部生效

支持手勢(shì)快進(jìn)快退，自動(dòng)隱藏播放欄

還未完成的功能

全屏切換

主題顏色

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

react-navigation內(nèi)置屬性screenProps，其原理仍然使用的context特性

調(diào)用方式

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

歷史記錄

./src/page/History.js

通過(guò)context傳遞數(shù)據(jù)，需設(shè)置contextType

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

收藏頁(yè)面

./src/page/Follow.js

與"歷史記錄"基本一致

本地存儲(chǔ)

./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;

搜索

./src/page/Search.js

影片篩選

./src/page/MovieContent.js

使用側(cè)邊導(dǎo)航欄，調(diào)用方式與原生DrawerLayoutAndroid一致

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

圖標(biāo)，啟動(dòng)圖

使用開(kāi)源庫(kù)react-native-splash-screen

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

如果需要白底深色的狀態(tài)欄文字

2.0 基本完成

安卓打包

./android/build.gradle

修改一下配置

注釋jcenter()，添加

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

不然會(huì)卡在下載階段

...
allprojects {
    repositories {
        mavenLocal()
        google()
        //jcenter()
        //更換國(guó)內(nèi)鏡像
        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 版本間來(lái)回切換安裝時(shí)可能會(huì)報(bào)錯(cuò)簽名不匹配，此時(shí)需要先卸載前一個(gè)版本再嘗試安裝。
可通過(guò) adb uninstall com.packgeName 方式來(lái)卸載，直接通過(guò)長(zhǎng)按桌面圖標(biāo)有可能卸載不干凈

視頻播放做全屏切換

沒(méi)有適配ios，不過(guò)代碼中沒(méi)有使用安卓專有的庫(kù)，理論上可以直接運(yùn)行（可能有少部分需要適配），有興趣的小伙伴可以fork下來(lái)自己適配一下

會(huì)新增設(shè)置選項(xiàng)，進(jìn)行網(wǎng)絡(luò)設(shè)置，播放設(shè)置等（會(huì)參考其他視頻軟件的功能）

目前歷史記錄和收藏均保存在本地，意味著如果卸載app將導(dǎo)致數(shù)據(jù)丟失，如果可能的話，將來(lái)把數(shù)據(jù)保存在自己的服務(wù)器上

react-navigation在頁(yè)面切換時(shí)略微卡頓，還有一個(gè)react-native-navigation，如果可能的話，可以用來(lái)替代react-navigation

目前在網(wǎng)上找的api可能不夠理想，如果誰(shuí)有更好的設(shè)計(jì)和更好的api可以參考一下~如果有提供后臺(tái)服務(wù)的就更好了

react-native確實(shí)性能略顯不足，特別是長(zhǎng)列表的情況，準(zhǔn)備學(xué)習(xí)flutter，一種新的渲染方式（類似于web中的canvas）

有什么問(wèn)題可以與我聯(lián)系

yanwenbin1991@live.com

或者直接提 issue

原文地址

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

https://github.com/XboxYan/DYTT

精神支撐一下，給個(gè) star 唄

如果體驗(yàn)覺(jué)得還不錯(cuò)的話，大佬們可以隨意打賞，金額不限