使用のFlatListについて
使用するには、最初のFlatListを導入しなければなりません
import { FlatList } from 'react-native';
复制代码ListHeaderComponent財産、
ヘッドアセンブリを定義するために使用
ListHeaderComponent={()=> this._createListHeader()}
_createListHeader(){
return (
<View style={styles.headView}>
<Text style={{color: 'white'}}>
头部布局
</Text>
</View>
)
}
复制代码ListFooterComponentプロパティ
尾を定義するために使用
ListFooterComponent = {()=> this._createListFooter()}
_createListFooter(){
return(
<View style="style.indicatorContainer">
{ this.state.showFoot === 1
&&
<ActivityIndicator
style={styles.indicator}
size = 'small'
animating = {true}
color = 'red'
/>
}
<Text>{this.state.showFoot === 1?'正在加载更多数据...':'没有更多数据'}</Text>
</View>
)
}
复制代码ItemSeparatorComponentプロパティ
分割ラインを定義するために使用
ItemSeparatorComponent = {()=>this._createSeparatorComponent()}
_createSeparatorComponent(){
return(
<View style={{height: 5, backgroundColor: '#eeeeee'}}/>
)
}
复制代码ListEmptyComponentプロパティ
ビューを表示する時間を設定しFlatListにデータがありません
アイテムのキー値を設定します。
あなたは、キー属性項目を設定する必要があり、または黄色の警告がポップアップ表示があるでしょう。そして、私たちはここで注意する必要がある各項目のキーはユニークです！
keyExtractor={this._keyExtractor}
_keyExtractor(item, index){
return `index${index}`
}
复制代码- itemlayout
属性は、オーバーヘッドのディメンションを回避するため、オプションの最適化、動的な測定内容です。我々はアイテムの高さを知っている場合、あなたはFlatListより効率的な動作をするためにFlatListそのプロパティを指定することができます！
//200为item的高度,5为分割线的高度
getItemLayout={(data, index) => ({
length:200, offset: (200 + 5) * index, index
})}
复制代码プルダウンリフレッシュ
2つの属性がありますFlatListドロップダウンリフレッシュを設定するために使用することができます。
- ロードされた新しいデータを待っている間に、このプロパティをtrueにリフレッシュ、リストは、シンボルが読み込まれて表示されます。
- このオプションが設定されている場合はonRefresh、リストが機能「をリフレッシュするためにプルダウン」を実現するためには、標準RefreshControl制御ヘッドを追加します。同時に、あなたは正しく爽やかなプロパティを設定する必要があります。
//不需要自定义样式的时候
/*refreshing = { this.state.is_Loading }
onRefresh = {()=>{
this.loadData();
}}*/
//修改loading样式
refreshControl = {
<RefreshControl
title = {'loading'}
colors = {['red']}//android
tintColor = {'red'}//ios
refreshing = { this.state.is_Loading }
onRefresh = {()=>{
this._onRefresh();
}}
/>
}
_onRefresh(){
...
//下拉刷新的方法
}
复制代码ラジャは、上のアップロード
LACキャリア、2つのプロパティを達成するためにFlatListパッケージ：
- onEndReachedThreshold：内容がどこまで下からトリガがコールバックをonEndReached時にこのプロパティを決定します。このパラメータは、比、ではない画素であることに留意されたいです。例えば、0.5のコンテンツの一番下から見える長さの距離をリスト半分トリガ電流を表します。これは、範囲：（0,1）、0と1を除きます。
- onEndReached：セットの下端からの距離の内容が不十分なonEndReachedThresholdときに呼び出され、リストにスクロールします。
onEndReached ={()=>{
this._onLoadMore();
}}
onEndReachedThreshold={0.1}
复制代码隠しスライドバー
- 横方向にスライドするように配置され
horizontal={true}
复制代码- 垂直スクロールバーを非表示にします
showsVerticalScrollIndicator={false}
复制代码- 隠された水平スクロールバー
showsHorizontalScrollIndicator={false}
复制代码共通機能
- 最後のセクションでscrollToEndのスクロールバー
1. 需要为FlatList设置ref属性绑定flatList
<FlatList ref={(flatList) => this._flatList = flatList}/>
2. 调用
_toEnd(){
this._flatList.scrollToEnd();
}
复制代码- 指定したインデックス位置にscrollToIndexスクロール
1. 需要为FlatList设置ref属性绑定flatList
<FlatList ref={(flatList) => this._flatList = flatList}/>
2. 调用
_toItem(){
//viewPosition参数：0表示顶部，0.5表示中部，1表示底部
this._flatList.scrollToIndex({viewPosition: 0, index: this.state.index});
}
复制代码使用のSwipeableFlatListについて
サポートFlatList、別の新しい3所有財産のすべてのプロパティとメソッド。
- bounceFirstRowOnMount：ブール
デフォルトでは、最初の時間を意味し、真であるかどうかについての項目FlatListの最初のスライド
- maxSwipeDistance
割り当てる必要があり、左にスライドは、最大距離を表します
- renderQuickActions：FUNC
スライドショーの内容を示すために割り当てられなければなりません。
<SwipeableFlatList
renderQuickActions={()=>this.genQuickAction()}
maxSwipeDistance={50}
bounceFirstRowOnMount={false}/>
//渲染
genQuickAction(){
return <View style={styles.quickContiner}>
<TouchableHighlight>
<View>
<Text
style={styles.delText}
onPress={()=>{
alert("您确定要删除吗？")
}}>删除</Text>
</View>
</TouchableHighlight>
</View>
}
复制代码使用のSectionListについて
- 完全にクロスプラットフォーム
- 水平レイアウトモードをサポートしています
- 設定可能なコールバックラインコンポーネントが表示または非表示
- 別のヘッドアセンブリをサポート
- 別の尾翼をサポートしています
- 分離線との間に自己定義されたラインをサポートしています
- サポートドロップダウンリフレッシュ
- 支持体上に、ラジャ・ロード
<SectionList
sections={this.state.CITY_NAMES}//需要绑定的数据
renderItem={(data) => this._renderItem(data)}
ItemSeparatorComponent = {()=>this._createSeparatorComponent()}
keyExtractor={this._keyExtractor}
renderSectionHeader={(data)=>this._renderSectionHeader(data)}//分组的头部
refreshControl = {
<RefreshControl
title={'loading'}
colors={['red']}
refreshing= { this.state.is_Loading }
onRefresh={() => this._onRefresh()}
/>
}
/>
复制代码