使用flatlist实现下拉刷新列表数据的传输问题

1，flatlist组件：

<FlatList
        style={styles.flatlist}
        data={this.state.data1}   //数据必须为数组
        horizontal={false} //
        initialNumToRender={8}  //最初可以展示的数据数量
        ListHeaderComponent={this.renderHeadComp}   //ListHeaderComponent
        ItemSeparatorComponent={this.renderSeparator}  //ItemSepatatorComponent
        ListFooterComponent={this.renderEndComp}   //ListFooterComponet
        refreshing={false}                      //为true加载时会显示圈圈
        renderItem={({item}) => this.renderItem(item)}  //渲染承载data数据的背景样式
        refreshControl={
            <RefreshControl
                refreshing={this.state.refreshing}
                colors={['#ff0000', '#00ff00', '#0000ff']}
                progressBackgroundColor={"#ffffff"}
                onRefresh={() => {
                    this.getdata();
                }}
            />
        }
/>

2，其中onRefresh是当下拉的时候，发生的事件，调用函数去获取后台数据；

3，data是flatlist数据列表即将呈现的数据，这里初始化：
constructor(){
super(props);
this.state=({
data1: [
{key: "我"},
{key:"是" },
{key:"小可爱"},
]

})

4，主要内容是，如何从后台将数据传到前台

//将数据库中某个字段的值全部拼接到一起成为一个字符串

$string=' ';
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
$string="$string,$row[name]"; // 得到字符串： “123,2435,gv,dfg,325,fga”
}
$result=["name"=>$string]; // 得到json形式的数组：[ "name"=>"123,2434,v,dfg,325,fga" ]
$json_result=json_encode($result); //将json形式的数组编码为json格式的数据发送给前端；
echo $json_result;

5，前端react native获取json格式的数据并解析：

将得到的[ "name"=>"123,2434,v,dfg,325,fga"]转化为：[ {key: '123'} , { key:'2434'} ..........]

fetch(url,options).then((resoponse)=>response.json()).then((result)=>{
   var data=result.name;
   var array=[ ];
for(var i=1;i<data.length;i++){
   array.push({key: data[i]} );
   }
   this.setState(data1:array );

}

扫描二维码关注公众号，回复： 6006752 查看本文章

6，注意：
a.在php中不像js那样，可以直接创建对象字面量，js可以：
   var a="bob";
   var m={ name: a };
php中只能：
$a="bob";
$array=[ "name"=>$a ];
$json_array=json_encode($array);
   echo $json_array;

b.在react native中，A函数调用B函数，在B函数中，this已经不指向组件了，这个时候的this无法调用state，因此，要想在B函数中调用state，需要先在A函数中保存this，var that=this；即可；

7，flatlist不仅要接收数据库中的数据，还要能够左侧滑动显示删除按钮，以此删除数据。
react-native-swipe-list-view react-native-swipeout(推荐）这两个组件可以用来实现滑动删除。

<SwipeableFlatList
    data={this.state.data2}
    renderItem={({ item }) => (
        <Text style={styles.label}>{item.label}</Text>
    )}
    renderRight={({ item }) => (   //当swipeable属于react-native-swipeable-flat-list时调用
     //必须将view和text都设置宽高，才会显示
       <View  style={styles.rightlabel}>
               <TouchableOpacity
                   onPress={this.deleteitems}
               >
                   <Text  style={styles.deleteme}  >删除</Text>
               </TouchableOpacity>
            </View>
    )}
    /* renderQuickActions={()=>this.getQuickActions()}  //当swipeableflatlist属于react-native时调用
     maxSwipeDistance={80}
     */
    initialNumToRender={8}  //最初可以展示的数据数量
    ListHeaderComponent={this.renderHeadComp}   //ListHeaderComponent
    ItemSeparatorComponent={this.renderSeparator}  //ItemSepatatorComponent
    ListFooterComponent={this.renderEndComp}
    backgroundColor={'white'}  //整个swipeableflatlist的背景色
    refreshControl={
        <RefreshControl
            refreshing={this.state.refreshing}
            colors={['#ff0000', '#00ff00', '#0000ff']}
            progressBackgroundColor={"#ffffff"}
            onRefresh={() => {
                this.getdata();
            }}
        />
    }
/>

使用flatlist实现下拉刷新列表数据的传输问题

猜你喜欢