前言
前陣子開(kāi)始學(xué)習(xí) React Native，一個(gè)人摸滾帶爬的也算是能寫(xiě)個(gè)小項(xiàng)目了带欢，在這里分享一下自己從零開(kāi)始學(xué)習(xí)的過(guò)程，也推薦一些比較優(yōu)秀的學(xué)習(xí)資源，讓大家學(xué)習(xí)過(guò)程可以提高一些效率俺猿。
在路上
一、環(huán)境搭建和 IDE 選型
React Native 環(huán)境搭建可以看官網(wǎng),也可以去看筆者的上篇文章蜈敢，接下去是IDE 選型和配置的環(huán)節(jié)辜荠，有幾種比較不錯(cuò)的 IDE：
- Atom + Nuclide：Atom 本質(zhì)上是一個(gè)文本編輯器，而不是一個(gè) IDE抓狭，因此在用來(lái)開(kāi)發(fā) React Native 時(shí)需要配合 Nuclide 一起使用伯病。
- Sublime Text 3： 功能十分強(qiáng)大，主要在于它的插件機(jī)制。通過(guò) Package Control 功能午笛，可以安裝各種需要的插件惭蟋。
- WebStorm：WebStorm 是著名的 JetBrains 公司開(kāi)發(fā)的號(hào)稱最智能的 Javascript 集成開(kāi)發(fā)環(huán)境。
- Visual Studio Code：Visual Studio Code 是微軟推出的一個(gè)輕量級(jí)的開(kāi)源 Web 集成開(kāi)發(fā)環(huán)境药磺。
筆者選擇了 WebStorm 告组，只有一個(gè)原因，那就是它和 Andoid Studio 很像(筆者是 Andorid Developer)癌佩。
二木缝、學(xué)習(xí)基礎(chǔ)知識(shí)
因?yàn)闆](méi)接觸過(guò) Web 前端這一塊，所以第一天去學(xué)習(xí)了 JavaScript围辙、html 和 css 一些基礎(chǔ)的知識(shí)我碟。記得那天瘋狂的找學(xué)習(xí)的資料，剛開(kāi)始在極客學(xué)院姚建、慕課網(wǎng)這些學(xué)習(xí)網(wǎng)站上學(xué)習(xí)了一會(huì)矫俺，后面在知乎上還是 google 搜索到阮一峰大神的 es6 教程，非常不錯(cuò)掸冤。同時(shí)厘托，也推薦 MDN，也是不錯(cuò)的學(xué)習(xí) JavaScript 的地方稿湿。當(dāng)時(shí)學(xué)習(xí)了一兩天這些基礎(chǔ)的知識(shí)铅匹，有了初步的了解。
三缎罢、了解 React Native
接下去就開(kāi)始瘋狂的搜索 React Native 的學(xué)習(xí)資料伊群，因?yàn)橥耆恢涝趺慈?xiě) React Native，所以找到了一些免費(fèi)的視頻學(xué)習(xí)資源策精，如果你想要一些學(xué)習(xí)資源的話舰始，可以去 React Native 學(xué)習(xí)指南看看，這邊概括了很多優(yōu)秀的學(xué)習(xí)資源咽袜，非常不錯(cuò)丸卷。說(shuō)實(shí)話看視頻效率實(shí)在有點(diǎn)低，你會(huì)發(fā)現(xiàn)視頻只是在逐個(gè)講解講官網(wǎng)的組件和 Api 询刹，所以筆者看了幾天視頻谜嫉，對(duì) React Native 有了初步了解后就沒(méi)再接著看視頻學(xué)習(xí)了。
四凹联、學(xué)習(xí)優(yōu)秀項(xiàng)目
當(dāng)時(shí)筆者對(duì) React Native 有了一點(diǎn)了解后沐兰，便去 GitHub 上尋找一些優(yōu)秀的項(xiàng)目對(duì)其進(jìn)行學(xué)習(xí)。這邊給個(gè)網(wǎng)站蔽挠，里面概括了一些優(yōu)秀的項(xiàng)目住闯。大家可以找一些 star 比較多的，然后更新時(shí)間比較近的項(xiàng)目進(jìn)行學(xué)習(xí)，筆者是通過(guò)Gank.io項(xiàng)目進(jìn)行學(xué)習(xí)比原。關(guān)于如何學(xué)習(xí)插佛，給個(gè)建議就是 clone 到本地后，按照項(xiàng)目作者的時(shí)間線去學(xué)習(xí)量窘。當(dāng)然學(xué)習(xí)過(guò)程中會(huì)遇到一些你不明白的知識(shí)點(diǎn)雇寇，那正是你去鞏固 JavaScript 或是 React 知識(shí)的時(shí)候，這樣鞏固學(xué)習(xí)比光看書(shū)學(xué)習(xí)效率高多了蚌铜。
五锨侯、寫(xiě)一個(gè)項(xiàng)目
開(kāi)始單獨(dú)寫(xiě)一個(gè)項(xiàng)目練手，可以是一個(gè)真實(shí)項(xiàng)目厘线，也可以是一個(gè)小項(xiàng)目用開(kāi)放的 Api 去完成识腿。筆者寫(xiě)的項(xiàng)目是通過(guò)豆瓣 Api 實(shí)現(xiàn)的，UI 界面大家可以自行充當(dāng)設(shè)計(jì)師去設(shè)計(jì)造壮，圖標(biāo)可以去 Iconfont 找。寫(xiě)完這個(gè)練手項(xiàng)目骂束，你會(huì)更清楚如何去學(xué)習(xí) React Native 耳璧。
項(xiàng)目介紹
首先看下效果圖：
項(xiàng)目中運(yùn)用了一些常用的第三方庫(kù)，關(guān)于第三方庫(kù)大家可以去 js.coach 查找展箱。接下去對(duì)項(xiàng)目的界面和功能進(jìn)行相應(yīng)的介紹旨枯。
1.界面下方的主 tab
項(xiàng)目中有三個(gè)主 tab：首頁(yè)、推薦和我的混驰，通過(guò) react-native-scrollable-tab-view 實(shí)現(xiàn)攀隔。使用示例如下：
render() {
return (
<TabNavigator tabBarStyle={{ height: 60, overflow: 'hidden' }}>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="首頁(yè)"
titleStyle={{color: 'rgb(169,183,183)', fontSize: 11}}
selectedTitleStyle={{color: 'rgb(234,128,16)', fontSize: 11}}
renderIcon={() => <Image source={require('./images/home_normal.png')}/>}
renderSelectedIcon={() => <Image source={require('./images/home_selected.png')}/>}
//badgeText ="1"
onPress={() => this.setState({selectedTab: 'home'})}
>
< Home {...this.props}/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'recommend'}
title="推薦"
titleStyle={{color: 'rgb(169,183,183)', fontSize: 11}}
selectedTitleStyle={{color: 'rgb(234,128,16)', fontSize: 11}}
renderIcon={() => <Image source={require('./images/recommend_normal.png')}/>}
renderSelectedIcon={() => <Image source={require('./images/recomm_selected.png')}/>}
onPress={() => this.setState({selectedTab: 'recommend'})}
>
< Recommend {...this.props} />
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'mine'}
title="我的"
titleStyle={{color: 'rgb(169,183,183)', fontSize: 11}}
selectedTitleStyle={{color: 'rgb(234,128,16)', fontSize: 11}}
renderIcon={() => <Image source={require('./images/mine_normal.png')}/>}
renderSelectedIcon={() => <Image source={require('./images/mine_selected.png')}/>}
onPress={() => this.setState({selectedTab: 'mine'})}
>
< Mine { ...this.props }/>
</TabNavigator.Item>
</TabNavigator>
);
}
2.首頁(yè)的圖片輪播，使用了 react-native-viewpager 實(shí)現(xiàn)栖榨。使用示例如下：
定義數(shù)據(jù)源
this.state = {
dataSource: new ViewPager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2
})
};
this.setState({
dataSource: this.state.dataSource.cloneWithPages(contentData),
});
應(yīng)用 ViewPager 組件
<ViewPager
dataSource={this.state.dataSource}
renderPage={this.renderPage}
isLoop={true}
autoPlay={true}>
</ViewPager>
顯示每個(gè) Page 界面
_renderPage(data) {
return (
<Image style={ styles.pager } source={{uri: data.cover}}/>
);
}
3.推薦列表的呈現(xiàn)昆汹，ListView 的運(yùn)用，使用示例如下：
設(shè)置數(shù)據(jù)源
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
}),
data: null,
loaded: false,
isRefreshing: false,
loadMore: false,
start: 0,
count: 20,
};
應(yīng)用 ListView 組件
<ListView
dataSource = {this.state.dataSource}
renderRow = {this._renderItem.bind(this)}
onEndReached={this._loadMore.bind(this)}
renderFooter={this._renderFooter.bind(this)}
onEndReachedThreshold = {29}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._refresh.bind(this)}
tintColor='#aaaaaa'
title='Loading...'
progressBackgroundColor='#aaaaaa'/>
}>
</ListView>
4.導(dǎo)航條的設(shè)置婴栽，使用 react-native-navbar 實(shí)現(xiàn)满粗。使用示例如下：
<NavigationBar
style = {{height:40}}
title={{title: '首頁(yè)'}}
/>
5.網(wǎng)絡(luò)數(shù)據(jù)的獲取，使用示例如下：
async fetchData() {
let response = await fetch(API_TOP);
let responseJson = await response.json();
let responseData = responseJson.subjects;
this.setState({
data: responseData,
dataSource: this.state.dataSource.cloneWithRows(responseData),
loaded: true,
isRefreshing: false,
});
}
總結(jié)
項(xiàng)目中還需要進(jìn)行完善優(yōu)化愚争，后續(xù)會(huì)學(xué)習(xí)redux對(duì)架構(gòu)進(jìn)行修整映皆，也會(huì)學(xué)習(xí)性能方面對(duì)項(xiàng)目進(jìn)行修改，也會(huì)增添一些動(dòng)畫(huà)效果轰枝。希望能和大家一起學(xué)習(xí)捅彻，一起進(jìn)步。
