GitHub_App(開發(fā)筆記)

這是一款從程序員實際需求出發(fā)，使用React Native開發(fā)的GitHub開源項目App，得益于React Native跨平臺的特性。在這個項目中你可以了解到ReactNative API的調(diào)用、RN控件的封裝、Native原生模塊的橋接、Redux等。（持續(xù)更新）

項目源碼和筆記：https://github.com/Pgrammerybj/GitHub_App.git

2018.03.07:
使用TabNavigator來實驗Tab欄的結(jié)構(gòu)，完成頁面的切換

2018.03.15:

• 使用Navigator來實現(xiàn)路由
• 自定義NavigationBar組件

2018.03.16

• 測試官網(wǎng)的ListView，嘗試了下拉刷新和添加Footer

2018.03.19

• 使用官方提供的Fetch測試Post/Get網(wǎng)絡(luò)請求，基于業(yè)務(wù)簡單的封裝了HttpUtils

Get請求

  /**
     * get請求
     * @param url
     * @returns {Promise<any>}
     */
    static get(url){
        return new Promise((resolve,reject)=>{
            fetch(url)
                .then(response=>response.json())
                .then(result=>{
                    resolve(result)
                })
                .catch(error=>{
                    reject(error)
                });
        });
    }

Post請求

 /**
     * Post請求數(shù)據(jù)
     * @param url
     * @param data
     * @returns {Promise<any>}
     */
    static post(url,data){
        return new Promise((resolve,reject)=>{
            fetch(url,{
                method:'post',
                headers:{
                    'Accept':'application/json',
                    'Content-Type':'application/json'
                },
                body:JSON.stringify(data)
            })
                .then(response=>response.json())
                .then(result=>{
                    resolve(result);
                })
                .catch(error=>{
                    reject(error);
                })
        });
    }

調(diào)用

 HttpUtils.post(url, data)
            .then(resultData => {
                this.setState({
                    result: JSON.stringify(resultData)
                })
            })
            .catch(errorData => {
                this.setState({
                    result: JSON.stringify(errorData)
                })
            })

2018.03.26

• 添加啟動頁面
• 修改啟動流程
• 測試GitHub搜索API

2018.04.03

• 添加了"最熱"模塊數(shù)據(jù)和展示
• 抽取了item的統(tǒng)一樣式

2018.04.04

• 添加了AsyncStorage的測試Demo，AsyncStorageTest.js
• 準備收拾行李去北京西啦

addTab() {
        AsyncStorage.setItem(KEY_TEXT, this.text, (error) => {
            if (!error) {
                this.toast.show('保存成功！',DURATION.LENGTH_SHORT)
            } else {
                this.toast.show('保存失?。? + error,DURATION.LENGTH_SHORT)
            }
        })
    }

    deleteTab() {
        AsyncStorage.removeItem(KEY_TEXT, (error) => {
            if (!error) {
                this.toast.show('刪除成功！',DURATION.LENGTH_SHORT)
            } else {
                this.toast.show('刪除失?。? + error,DURATION.LENGTH_SHORT)
            }
        })
    }

    getTab() {
        AsyncStorage.getItem(KEY_TEXT, (error, result) => {
            if (!error) {
                if (!result) {
                    this.toast.show('沒有內(nèi)容',DURATION.LENGTH_SHORT)
                } else {
                    this.toast.show('獲取成功：' + result,DURATION.LENGTH_SHORT)
                }
            } else {
                this.toast.show('獲取失敗：' + error,DURATION.LENGTH_SHORT)
            }
        })
    }

2018.04.06-07 02:57

• 添加了自定義標簽頁面（MyPage.js->CustomLabelPage.js）
• 抽取了LanguageDao類，用來處理用戶標簽的添加和移除
• 編寫了ArrayUtils用來檢測數(shù)組中書否有重復(fù)的對象
• 添加了ViewUtils類用來動態(tài)的生成各種模板視圖

這一次的更新主要是添加自定義標簽頁面，當用戶首次進入APP時，從本地讀取默認的標簽數(shù)據(jù)。用戶可以當當前頁面選擇是否需要加載默認的標簽數(shù)據(jù)，還有一些連帶的邏輯，在后續(xù)的更新中完善。

2018.04.08 23：52

• 使用react-native-sortable-listview實現(xiàn)標簽排序頁面

2018.04.22 22:24

• 編寫DataRepository類添加網(wǎng)絡(luò)數(shù)據(jù)的緩存策略，以及數(shù)據(jù)失效的邏輯(公司項目組絕對用MobX取締之前的Redux,這段時間也在學(xué)習(xí)MobX,后期考慮將MobX移植到Github項目中)

項目源碼和筆記：https://github.com/Pgrammerybj/GitHub_App.git