电影天堂RN客户端V2.0发布

电影天堂RN客户端V2.0重新开始！重新开始两年前发布了第一个版本。现在，使用最新的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.gitcd DYTTyarnreact-native run-android下载目前只有安卓版本下载，需要ios的可以自行编译安装下载链接二维码（微信扫码可能不支持，建议用其他扫描工具或者直接用浏览器打开上面链接）考虑到安全问题，暂不提供安装包，可通过上述方式安装，或者与我联系提供安装包相关截图欢迎页首页功能菜单历史记录收藏主题颜色搜索搜索结果影片筛选影片详情影片播放更新记录记录一些页面的关键点20181123使用react-navigation作为导航/App.js由于新版导航用到了原生手势库，所以需要yarn add react-native-gesture-handlerreact-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-scrollviewpagerhttps://github.com/XboxYan/react-native-scrollviewpager有兴趣的可以给个star使用方式比较简单yarn add react-native-scrollviewpagerimport 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-videohttps://github.com/react-native-community/react-native-video这里有一个bugsource={{uri:uri}}，uri不能为空字符串，否则切换资源部生效支持手势快进快退，自动隐藏播放栏还未完成的功能全屏切换20181203主题颜色./App.js、./src/page/Theme.jsreact-navigation内置属性screenProps，其原理仍然使用的context特性<App screenProps={{themeColor:themeColor, setTheme:this.setTheme}} />调用方式const {navigation,screenProps:{themeColor}} = this.props;20181204历史记录./src/page/History.js通过context传递数据，需设置contextTypeimport { 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使用原生AsyncStorageclass 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.js20181211影片筛选./src/page/MovieContent.js使用侧边导航栏，调用方式与原生DrawerLayoutAndroid一致import DrawerLayout from ‘react-native-gesture-handler/DrawerLayout’;20181214图标，启动图使用开源库react-native-splash-screenhttps://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/5c18911f8aab210ff34d0147https://github.com/XboxYan/DYTT打赏精神支撑一下，给个 star 呗如果体验觉得还不错的话，大佬们可以随意打赏，金额不限微信支付宝