天天看點

react-native-easy-app 詳解與使用之(三) View,Text,Image,Flatlist

react-native-easy-app

是一款為React Native App快速開發提供基礎服務的純JS庫(支援 IOS & Android),特别是在從0到1的項目搭建初期,至少可以為開發者減少30%的工作量。

react-native-easy-app 主要做了這些工作:

1. 對AsyncStorage進行封裝,開發者隻需幾行代碼即可實作一個持久化資料管理器。 2. 對fetch進行封裝,使得開發者隻需關注目前App的前背景互動邏輯和協定,定義好參數設定及解析邏輯即可。

3. 重新封裝了RN的View、Text、Image、FlatList 使用得這些控件在适當的時候支援事件或支援icon與文本,能有效減少布局中的嵌套邏輯。

4. 通過設定一個螢幕參考尺寸,重置XView、XText、XImage的尺寸,實作自動多屏适配

可能有人覺得,不同的App有不同的風格UI也完全不一樣,除非是特定需求的UI,基礎功能的UI直接寫就行了,還需要封裝麼?

一千個人心中,有一千個哈姆雷特,也許我的封裝思路能給你帶來不一樣的啟發也未可知呢?

簡單UI(XView,XText,XImage)

1、事件支援

View,Text,Image作為使用頻率最高的三個元件,并不支援我們最常使用的onPress事件,我們要使用onPress事件時,得使用TouchableXXX系列元件來包裹指定的點選區域。

XXXX使用得這三個基本元件支援onPress事件,實作原理很簡單,若傳入的屬性中包含onPress方法,則傳回一個由Touchable系列元件(預設為:TouchableOpacity)包裹的元件,否則傳回原元件。其它用法跟原生元件一緻,所有原生屬性都支援:

XWidget.initResource('https://react-native-easy-app.oss-cn-beijing.aliyuncs.com/images/');
return (
    <View style={styles.parent}>
        <XImage style={styles.imageStyle} onPress={() => console.log('點選了圖檔')} icon='img_click.png' iconSize={20}/>
        <XImage style={styles.imageStyle} onPress={() => console.log('點選了View')} icon='img_click.png'/>
        <XView style={styles.imageStyle} onPress={() => console.log('點選了文本')}/>
        <XText style={styles.textStyle} onPress={() => console.log('點選了文本')} text='測試點選事件'/>
    </View>
)           
react-native-easy-app 詳解與使用之(三) View,Text,Image,Flatlist
  • 如上XView、XImage、XText都支援了點選事件【并處理了快速重複點選問題】
  • 若設定了資源資源的baseUrl,圖檔的icon由隻需要設定圖檔【名稱】即可
  • 當然icon支援多種類型:url、require('./name.jpg'),base64碼等方式
  • XImage也支援通過iconSize對内部圖檔設定獨立的尺寸

2、XText支援圖示設定

很多情況下UI的展示是一個文本一個圖示的組合,是以我們的做法基本上都是通過一個View去包裹Image與Text,這樣使用得UI布局結構變得相對複雜,這時候就可以使用XText了

<XText style={styles.textStyle} text='圖示在上' icon='text_img_top.png' iconPosition='top' iconSize={30} iconMargin={3}/>
<XText style={styles.textStyle} text='圖示在右' icon='text_img_right.png' iconPosition='right' iconSize={30} iconMargin={3}/>
<XText style={styles.textStyle} text='圖示在下' icon='text_img_down.png' iconPosition='bottom' iconSize={30} iconMargin={3}/>
<XText style={styles.textStyle} text='圖示在左' icon='text_img_left.png' iconPosition='left' iconSize={30} iconMargin={3}/>           
react-native-easy-app 詳解與使用之(三) View,Text,Image,Flatlist

或許,從止面的代碼和展示出的UI看不出有什麼友善之處,下面我舉幾個例子:

<XText style={styles.text} onPress={() => console.log('點選事件')} text='無圖示文本'/>
<XText style={styles.rnTextItem} text='訂單清單' icon='right_arrow.png' iconSize={16} iconPosition='right' textExtend={true} onPress={() => console.log('點選跳轉')}/>
<XText style={styles.rnSearch} text='請輸入搜尋條件...' icon='icon_search.png' iconSize={16} iconPosition='left' iconMargin={6} onPress={() => console.log('點選跳轉去搜尋')}/>
<XView style={{flexDirection: 'row', alignItems: 'center', margin: 20,}}>
    <XText icon='icon_home.png' text='首頁' iconPosition='top' iconSize={20} style={styles.tabText} iconMargin={3} onPress={() => console.log('點選切換Tab')}/>
    <XText icon='icon_mine.png' text='我的' iconPosition='top' iconSize={20} style={styles.tabText} iconMargin={3} onPress={() => console.log('點選切換Tab')}/>
    <XText icon='icon_favorite.png' text='收藏夾' iconPosition='top' iconSize={24} style={[styles.tabText, {fontSize: 13}]} iconMargin={3} onPress={() => console.log('點選檢視收藏夾')}/>
    <XText icon='arrow_left.png' text='傳回' iconPosition='left' iconSize={20} style={[styles.tabText, {fontSize: 15}]} onPress={() => console.log('傳回上一頁')}/>
    <XText icon='icon_close.png' text='關閉' iconPosition='right' iconSize={20} style={[styles.tabText, {fontSize: 15}]} onPress={() => console.log('關閉當關頁面')}/>
</XView>
<XText icon='icon_logo.png' text='我的世界' iconPosition='top' iconSize={90} style={{color: Colors.text_light, fontSize: 15,}} iconMargin={3} onPress={() => console.log('點選顯示應用資訊')}/>           
react-native-easy-app 詳解與使用之(三) View,Text,Image,Flatlist
  • 如果從UI很難看出上面的這些各種類型的UI元素竟然是同一個控件XText實作的,但事實卻是如此。
  • 當然,這種包裹嵌套方式自然會引出另一個問題,當給這些UI設定屬性時,屬性是被傳給外層的View還内層的Text呢?不用擔心内層包裝已經做了處理,将傳入的屬性和樣式做了拆分,屬于Text的屬性和樣式會傳給Text,剩下的再傳給外層的View

複雜UI(XFlatList)

1、下拉重新整理與分頁支援

下拉重新整理,滾動到底部加載更多資料是很常見的應用場景,但原生的Flatlist并不支援,故對原生Flatlist進行了一下簡單封裝,并支援以下狀态:

static RefreshStatus = {
        Idle: {},//idle status

        RefreshingData: {text: 'loading…'},  // 加載中(下拉重新整理)...
        NoData: {text: 'load complete'},  // 無資料(下拉重新整理)
        LoadFailure: {text: 'failed to load'},  // 加載失敗(下拉重新整理)

        LoadingMoreData: {moreText: 'loading…'},  // 加載中(加載更多)
        NoMoreData: {moreText: 'All data has been loaded'},  // 無資料(加載更多)
        LoadMoreFailure: {moreText: 'Click reload'},  // 加載失敗(加載更多)

        NetException: {text: 'network exception', moreText: 'Network exception, click reload'}, // 網絡異常
    }           
  • 各狀态文本描述可以自由訂制
react-native-easy-app 詳解與使用之(三) View,Text,Image,Flatlist
react-native-easy-app 詳解與使用之(三) View,Text,Image,Flatlist
react-native-easy-app 詳解與使用之(三) View,Text,Image,Flatlist
react-native-easy-app 詳解與使用之(三) View,Text,Image,Flatlist
  • XFlatlist的用法與原生Flatlist幾乎一樣,原生屬性也都支援:
<XFlatList data={dataList}
           onRefresh={() => this.queryDataList(true)}
           onLoadMore={() => this.queryDataList(false)}
           refreshStatus={{RefreshingData: {text: '重新整理中,請稍候...'},}}
           ListHeaderComponent={() => <XText style={styles.header} text={headerText}/>}
           ref={refreshList => this.refreshList = refreshList}
           renderItem={({item, index}) => this.renderItem(item, index)}/>           
  • 怎樣發發送請求與設定資料,保證清單的重新整理、加載更多等功能正常的展示呢?主要掌握兩個方法的使用即可:
    1. refreshPreLoad = (isPullDown) => {};

      在http請求發送【前】調用XFlatlist的 refreshPreLoad 方法并傳入是否是下拉重新整理

    2. refreshLoaded = (success, isPullDown, noMoreData, networkException) => {}

      在http請求發送傳回【後】調用XFlatlist的 refreshLoaded 方法:

      • success =>請求成功與失敗
      • isPullDown =>目前操作是下拉還是加載更多
      • noMoreData =>是否已經沒有更多資料
      • networkException =>是否網絡異常

我們看看示例分頁清單的完整實作:

queryDataList = (isPullDown) => {
    let {dataList} = this.state;
    this.pageIndex = isPullDown ? 1 : this.pageIndex + 1;
    this.refreshList && this.refreshList.refreshPreLoad(isPullDown);
    let params = {page: isPullDown ? 1 : this.pageIndex};
    XHttp().url(Api.queryAnimations).param(params).get((success, {results, last_page}, msg, code) => {
        this.refreshList && this.refreshList.refreshLoaded(success, isPullDown, params.page >= last_page, netWorkException(code));
        if (success) {
            this.setState({dataList: isPullDown ? results : [...dataList, ...results]});
        } else {
            showToast(msg);
        }
    });
};           

發現是不是很簡單?通過XFlatlist 20幾行代碼就能完整的實作一個支援下拉重新整理,分頁加載等各種狀态功能的清單。

react-native-easy-app 詳解與使用之(四)螢幕适配

想進一步了解,請移步至

npm

或github檢視

,有源碼及使用

示例

,待大家一探究竟,歡迎朋友們 Star!

繼續閱讀