電影天堂React Native 客戶端V2.0發佈

時間  2019-11-07
標籤 天堂 react native 客戶端 v2.0 發佈 欄目 React 简体版
原文   原文鏈接

電影天堂React Native 客戶端前端

從新開始！node

具體更新以https://github.com/XboxYan/DYTT爲準。react

從新開始

兩年前發佈了第一個版本。android

如今，ios

使用最新的react-native 0.57和全新的設計完成了V2.0git

免責聲明

本項目僅供學習交流使用，不得用於其餘商業行爲，數據來源於第三方網站，與本人無關程序員

爲何要從新開始呢

有不少小夥伴發郵件問我爲何以前的項目運行不起來。github

其實這個是我本身的緣由，以前作的時候沒什麼經驗，不少時候就直接修改了第三方庫，因此就運行不起來了web

還有就是第三方api也作了很大的變更shell

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的能夠自行編譯安裝

下載連接

二維碼

（微信掃碼可能不支持，建議用其餘掃描工具或者直接用瀏覽器打開上面連接）

考慮到安全問題，暫不提供安裝包，可經過上述方式安裝，或者與我聯繫提供安裝包

相關截圖

歡迎頁

歡迎頁

首頁

首頁

功能菜單

功能菜單

歷史記錄

歷史記錄

收藏

收藏

主題顏色

主題顏色

搜索

搜索

搜索結果

搜索結果

影片篩選

影片篩選

影片詳情

影片詳情

影片播放

影片播放

更新記錄

記錄一些頁面的關鍵點

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 唄

若是體驗以爲還不錯的話，大佬們能夠隨意打賞，金額不限

clipboard.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程