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 );
}
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(); }} /> } />