大家好,我想知道如何更改Flatlist每行中的文本。
我希望能够在follow
和unfollow
之间切换。
这是我的代码示例:=>
this.state = {
FlatListItems : [
{"key": "MARIA", "image":require("./assets/image/maria.jpg")},
{"key": "MARTA", "image":require("./assets/image/marta.jpg")},
{"key": "MARTIN", "image":require("./assets/image/martin.jpg") },
{"key": "OLIVIA", "image":require("./assets/image/olivia.jpg") },
],
checked:true,
}'
这是选中的功能
checked=()=>{
if(checked==true)
{
this.checked.setState(true)
}
else{
this.checked.setState(False)
}
}
这是渲染功能
<FlatList
contentContainerStyle={{
flexDirection: 'row',alignItems:'center',paddingLeft:10,borderTopRightRadius:10,borderTopLeftRadius:10,
flexWrap: 'wrap',}}
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item,key}) =><View style={{padding:5,borderTopRightRadius:10,borderTopLeftRadius:10,}}>
<ImageBackground source={item.image}
style={{height:230,width:185,borderTopRightRadius:10,borderTopLeftRadius:10}}
blurRadius={ Platform.OS == 'ios' ? 10 : 6 } >
<View style={{alignItems:'center',padding:20,backgroundColor:'rgba(0,0,12, 0.4)'}}>
<View style={{alignItems:'center',padding:20}}>
<Image source={item.image} style={{width: 90, height: 90, borderRadius: 60}}/>
</View>
<View style={{alignItems:'center',paddingTop:10}}>
<Text style={{fontSize:18,fontFamily:'CRC55',color:'white'}}>{item.key}</Text>
<Text style={{fontSize:22,fontFamily:'CRC55',color:'white',paddingTop:10}}>{item.key}</Text>
<View style={{backgroundColor:'white',width:185,height:10}}>
</View>
</View>
</View>
</ImageBackground>
{
!this.state.checked? <TouchableOpacity onpress={this.checked}
><Text style={{fontSize:20,alignItems:'center'}}>FOLLOWING</Text></TouchableOpacity>: <TouchableOpacity onpress={()=>{this.setState({checked:key})}}><Text style={{fontSize:20,alignItems:'center'}}>FOLLOW</Text></TouchableOpacity>
}
</View>
}
/>
我的问题是,我如何在Flatlist中的每个项目之间选择关注还是取消关注。
答案 0 :(得分:0)
您可以直接使用此示例。我刚刚使用了offical docs中的一些代码。您可以分别保留每个列表项的状态。您可以根据需要轻松调整此代码
import React, { Component } from 'react'
import { Text, View, FlatList, TouchableOpacity } from 'react-native'
const data = [
{ "key": "MARIA", "title": "image MARIA", "id": 1 },
{ "key": "MARTIN", "title": "image MARTIN", "id": 2 },
{ "key": "OLIVIA", "title": "image OLIVIA", "id": 3 },
];
class MyListItem extends React.PureComponent {
state = {
selected: true
}
_onPress = () => {
this.setState({
selected: !this.state.selected
})
};
render() {
const text = this.state.selected ? "follow" : "unfollow";
return (
<TouchableOpacity onPress={this._onPress}>
<View>
<Text >
{this.props.title + " " + text}
</Text>
</View>
</TouchableOpacity>
);
}
}
export default class MultiSelectList extends React.PureComponent {
_keyExtractor = (item, index) => item.id;
_renderItem = ({ item }) => (
<MyListItem
id={item.id}
title={item.title}
/>
);
render() {
return (
<FlatList
data={data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
);
}
}