想想有一段時(shí)間沒更新博客了腿准，其中有工作稍微忙了點(diǎn)的原因，其實(shí)作者找了一個(gè)項(xiàng)目一直在練習(xí)。另一方面作者購(gòu)買了一個(gè)域名并且通過(guò)辛苦努力搭建了一個(gè)自己的小窩肮砾，歡迎各位的光臨哦！（作者的小窩傳送門）袋坑，以后寫的文章將在自己的小窩作為首發(fā)了仗处。
項(xiàng)目背景
本人練習(xí)的項(xiàng)目是一個(gè)通過(guò)豆瓣公共api實(shí)現(xiàn)了電影相關(guān)的一個(gè)APP。主要功能有推薦咒彤、搜索疆柔、登錄、詳情等镶柱，由于是剛學(xué)習(xí)完RN第一個(gè)練習(xí)項(xiàng)目，所以難免有些生疏和技術(shù)的不熟練模叙，哪里有些的不好的地方希望大家可以不吝賜教歇拆。本項(xiàng)目是通過(guò)兩個(gè)階段完成的：第一階段使用RN自帶的控件比如TabBarIOS、NavigatorIOS、Button故觅、Image等厂庇；第二階段重構(gòu)使用了比較火的一些第三方控件react-native-navigation、react-native-img-cache输吏、react-native-button权旷；第三階段自己實(shí)現(xiàn)了一個(gè)控件FOFSegmentcontrol，可以拷貝到工程里邊直接使用
項(xiàng)目視頻介紹
使用到的技術(shù)
- ES6 其中主要使用的是箭頭函數(shù)這個(gè)特性贯溅，項(xiàng)目中代碼其實(shí)使用了兩種拄氯，我注釋掉了一種。兩種最大的區(qū)別就是箭頭函數(shù)自動(dòng)綁定this
- Flex 一種布局方式
- JavaScript
- Objective-c
項(xiàng)目詳細(xì)介紹
1它浅、項(xiàng)目初始化
由于使用到了react-native-navigation第三方框架導(dǎo)航译柏，所以APP代碼還有有挺大區(qū)別的。
直接在index.os.js中將所有的代碼注釋掉僅僅使用如下一句即可
import app from './app/App'
1.1姐霍、App.js源碼
App其實(shí)一方面registerScreens()方法注冊(cè)了所有的Component鄙麦，另一方面使用了Navigation.startTabBasedApp啟動(dòng)了整個(gè)App，實(shí)現(xiàn)了UITabBar的效果
import {Platform} from 'react-native';
import {Navigation} from 'react-native-navigation';
import {registerScreens,registerScreenVisibilityListener} from './Screens/index';
import Icons from './Assets/Icon';
// screen related book keeping
registerScreens();
registerScreenVisibilityListener();
const tabs = [{
label: '推薦',
screen: 'com.fof.FlyOceanMovies.MovieList',
icon: {uri:Icons.star,scale:4.6},
title: '熱門推薦',
},
{
label: '北美票房',
screen: 'com.fof.FlyOceanMovies.USBoxList',
icon: {uri:Icons.featured,scale:1.1},
title: '北美票房',
},
{
label: '搜索',
screen: 'com.fof.FlyOceanMovies.SearchForm',
icon: {uri:Icons.search,scale:1.2},
title: '搜索',
}
];
// this will start our app
Navigation.startTabBasedApp({
tabs,
animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade',
tabsStyle: {
tabBarBackgroundColor: '#003a66',
tabBarButtonColor: '#ffffff',
tabBarSelectedButtonColor: '#ff505c',
tabFontFamily: 'BioRhyme-Bold',
},
appStyle: {
tabBarBackgroundColor: '#003a66',
navBarButtonColor: '#ffffff',
tabBarButtonColor: '#ffffff',
navBarTextColor: '#ffffff',
tabBarSelectedButtonColor: '#ff505c',
navigationBarColor: '#003a66',
navBarBackgroundColor: '#003a66',
statusBarColor: '#002b4c',
tabFontFamily: 'BioRhyme-Bold',
},
});
2镊折、各個(gè)子頁(yè)面
MovieList：首頁(yè)
USBoxList：北美票房
SearchForm：搜索
MovieDetail：詳情
Login：登錄界面
SearchResult：搜索結(jié)果頁(yè)
Main.js：相當(dāng)于CSS樣式胯府，其實(shí)就是布局
其中MovieList自己實(shí)現(xiàn)了相當(dāng)于iOS的segmentcontrol的效果使用到了ReactNative中的動(dòng)畫。
下圖詳細(xì)概括了RN中動(dòng)畫內(nèi)容恨胚，所謂得此圖得天下骂因。哈哈
還有一些其他的關(guān)注點(diǎn)我都在代碼加了注釋，大家有興趣可以詳細(xì)看一下代碼与纽，由于里邊包括了我兩個(gè)階段的所有代碼侣签，所以大家要耐心看哦。
總結(jié)
學(xué)習(xí)React Native有一段時(shí)間了急迂，寫這個(gè)項(xiàng)目其實(shí)不是很熟練影所，踩了不少坑，寫的也不是非常的快僚碎。但是沒遇到一個(gè)坑都停下來(lái)好好思考復(fù)習(xí)鞏固自己沒掌握的知識(shí)猴娩，讓自己也提升了不少。所以萬(wàn)里之行始于足下勺阐，掌握知識(shí)的最快方法就是行動(dòng)起來(lái)卷中，找個(gè)項(xiàng)目從0開始，完整的寫完一個(gè)項(xiàng)目渊抽。不僅驗(yàn)證了自己所學(xué)的知識(shí)蟆豫，同時(shí)在寫項(xiàng)目中能夠?qū)W到之前沒學(xué)到的知識(shí),也鞏固了自己的新知識(shí)。
