時間過得真快，眨眼已經快3年了！
1.我的第一個App
還記得我14年初寫的第一個iOS小程序，當時是給別人寫的一個單機的相冊，也是我開發的第一個完整的app，雖然功能挺少，但是耐不住心中的激動啊，現在我開始學react native，那么現在對於react native也算是有所了解了，就用網上的接口開發一個小程序，現在帶大家來寫這個程序！接口是用看知乎的API，簡簡單單的只有get，可以從這里入門，也算是帶大家入門吧，過后我會把源代碼放在我的github上，前期項目肯定特別簡陋，后面慢慢來優化，好了，廢話不多說，坐穩扶好，咱們開車了！！！！！
首先需要一個框架，可以省時省力，不再重復的造輪子。
(1)框架
框架咱們就不再搭建了，我前面寫了一個特別簡單的框架，放在github上了，咱們直接下載下來用就可以了，下載地址在我的github上,這個框架是基於react-native-tab-navigator的，運行這個程序，咱們做的第一步就是打開終端配置環境
$npm install $npm install react-native-tab-navigator --save
然后我們就可以打開文件運行程序了
(2)修改名稱
用Xcode打開文件navtabbar.xcodeproj，進入AppDelegate.m文件中把
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"navtabbar" initialProperties:nil launchOptions:launchOptions];
中的moduleName改為你想要的名字，然后在plist文件中修改Bundle name為你修改過的名字，最后最重要的一步，打開index.ios.js文件修改注冊入口,
AppRegistry.registerComponent('你修改的名字', () => NavIndex)
現在iOS的App名稱修改完成，可以運行一下看看是不是修改成功！
2.首頁搭建
(1)首頁界面代碼修改
進入login.js文件，刪除 <Text onPress={this._onPage.bind(this)} style={styles.textStyle}>登錄</Text>
然后添加Image，咱們待會給首頁設置一個背景圖,添加
TouchableOpacity,
Dimensions,
TextInput
OK,添加這些組件就夠了!
(2)界面搭建
首先，我們先在src文件夾中新建一個images的文件夾，用於存放我們的圖片
現在就可以找一些圖片存進去。
<Image source={require('./images/background.jpg')} style={styles.backgroundStyle}>
然后簡單的登錄一下，當然只是一個界面而已
<FormText style={{marginTop:60}}
placeholder='賬號'
placeholderTextColor='gray'
defaultValue='Demon404'
/>
<FormText style={{marginTop:10}}
placeholder='請輸入密碼'
placeholderTextColor='orange'
defaultValue=''
/>
<TouchableOpacity onPress={this._onPage.bind(this)}>
<Button style={{marginTop:20,width:Width/2,height:40,backgroundColor:'blue',borderRadius:10}}
buttonTitle="登錄"
/>
</TouchableOpacity>
這里的FormText是我自己寫的一個小控件。
下面可以看一下界面效果
由於沒有post請求，所以這個頁面大家就簡單的樂呵樂呵就好了，反正下個頁面跟這個頁面沒什么太大關系.......
(3)主頁搭建
主頁就是一個Tabbar界面，目前考慮先有三個模塊!,日后再考慮刪減，嗯，就是這么任性！
一個是推送的文章模塊，一個是搜索模塊，最后的是設置模塊。
咱們先看文章模塊主頁面
cellRow(data) { return ( <View style={styles.cellStyle}> <Image style={{width:WIDTH-40, height: 100}} source={{uri: data.pic}} /> <Text style={styles.title}>{data.excerpt}</Text> </View> ); } render() { return ( <View style={styles.container}> <NavBar name='看知乎'/> <ListView initiaListSize={1} onEndReachedThreshold={10} dataSource={this.state.dataSource} renderRow={this.cellRow.bind(this)} style={styles.listView} /> </View> ); }
這是我們的ListView頁面的代碼，只是簡單的抓取看知乎的一個接口頁面，
怎么實現數據同步呢？
這就要說到組件的生命周期了：一般來說，一個組件類由 extends Component 創建，並且提供一個 render 方法以及其他可選的生命周期函數、組件相關的事件或方法來定義。
咱們這里簡單說一下生命周期函數
componentWillMount：只會在裝載之前調用一次，在 render 之前調用
componentDidMount：只會在裝載完成之后調用一次，在 render 之后調用
componentWillUnmount： 卸載組件時調用,
constructor(props, context)：構造函數，在創建組件的時候調用一次
目前使用的也就這幾個，當然聲明周期所調用的函數不僅僅這幾個，這些咱們日后再講。
在這里，我們簡單的用到了componentDidMount,
首先var GET_URL = 'http://api.kanzhihu.com/getposts';
然后在listView頁面定義數據解析方法
componentDidMount(){
this.fetchData();
}
實現：
fetchData(){ fetch(GET_URL) //ES6的寫法左邊代表輸入的參數右邊是邏輯處理和返回結果 .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource : this.state.dataSource.cloneWithRows(responseData.posts), }); }) .done(); }
constructor(props) {
super(props);
//state內部維護的一個狀態，我們剛開始進來的為空，來加載空的view
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
};
}
，然后根據上面的RowData就可以實現下面的頁面效果
1.
2.
圖1就是咱們搭建的主頁，圖2是詳細頁。
圖1和圖2實現原理是相同的，都是用listView來搭建頁面，那么如何來傳值呢？
Nav 有個屬性renderScene 回調方法有兩個參數route和navigator。
大家還記得{...route.params}吧，
咱們需要做的就是在第一個頁面push到第二個頁面的時候這樣寫，
this.props.navigator.push({ component:Detail, params:{nextdata: rowdata}, })
第二個頁面直接寫this.props.nextdata就可以調用傳過去的rowdata了，那么第二個頁面實現起來還難嗎？這里就不在多說了，
ps:大家可以想一下renderRow={this.cellRow.bind(this)}為什么要這么寫？當初renderRow={this.cellRow()}不也可以嗎？
(4)搜索頁搭建
咱么先來看圖吧，這個模塊暫時實現了兩個頁面的功能，以后慢慢添加，不着急....
這就是那兩個頁面，也非常簡單，我就把思路說一下，大家可以想着做就行了，程序猿嘛，多動腦還是很好的!,一看就知道，搜索頁就是幾個簡單的UI，然后出發幾個方法，這里我是在搜索頁把接口傳到下一頁了，這個其實不推薦，主要是我為了省代碼，並且搜索名稱和排行榜搜索的接口不太一樣，大家理解就行，
首先，搜索框這里我用了textinput來代替，其實功能也是一樣的。點擊放大鏡，把輸入框里的內容拼接到接口上，傳到下一頁，下一頁直接用收到的接口解析就可以了，那么怎么得到textinput里面的值呢？
來看代碼
<TextInput style={styles.inputStyle} placeholder="請輸入搜索條件!" onChangeText={(text) => this.setState({text})} /> constructor(props) { super(props); this.state = {text: ''}; } searchUser(){ console.log(this.state.text);
看過文檔的朋友應該都知道onChangeText的作用是干嘛的，我也不多說，那么列表頁也如同前幾個頁面一樣，一通則百通。
3.最后
把完整的gif圖放給大家 😁O(∩_∩)O哈哈O(∩_∩)O哈哈~
4.總結
其實這些都非常簡單，從頭到尾都沒用太難的東西，從登錄頁開始，咱么搭建了賬號和密碼的輸入框，以及頭像和登錄按鈕，這些基礎的UI對大家來說肯定不是問題，對新手來說應該問題也不大，使用控件，設置一下屬性，控制一下位置，這個頁面一點數據都沒有用到。接下來進入首頁，通過組件生命周期函數，咱么解析下來的數據綁定到ListView上面，然后在把需要的字段傳遞到下一頁，下一頁通過拼接的接口解析數據，展現給大家，中間還加了一個WebView，因為具體的接口沒有，所以暫時就通過查詢到的數據直接把網頁展現給大家，item圖標暫時也沒有換，這個App暫時只有這些，缺失的東西以后慢慢添加，功能模塊也慢慢添加，這里大概的框架也給大家分享了，大家可以自由發揮....另外代碼有些需要簡化修改，這些我會慢慢來，
這里我把github上的源碼地址給大家分享一下，也歡迎大家指出有錯誤的地方，共同學習，努力提高！
Demon404的github：https://github.com/Demon404/KZHApp
由於引入了react-native-tab-navigator，所以一定要加上去才能運行
install react-native-tab-navigator --save,
本文原創，首發地點為博客園