React native 更改每个项目的平面列表中的文本

嘿，伙计们，我想知道如何更改平面列表中每一行的文本。 我希望能够在

跟随

和

取消跟随

之间切换

下面是我的代码示例：=>

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函数

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>
      }
     />

{item.key}
{item.key}
{
！this.state.checked？FOLLOWING:{this.setState（{checked:key}}}>FOLLOWING
}
}
/>

---

我的问题是，如何在平面列表中的每个项目的follow和unfollow之间切换。

您可以直接使用此示例。我刚刚使用了来自的一些代码。将每个列表项分别保持状态。您可以根据需要轻松调整此代码

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

import React，{Component}来自“React”
从“react native”导入{文本、视图、平面列表、TouchableOpacity}
常数数据=[
{“key”：“MARIA”，“title”：“image MARIA”，“id”：1}，
{“key”：“MARTIN”，“title”：“image MARTIN”，“id”：2}，
{“key”：“OLIVIA”，“title”：“image OLIVIA”，“id”：3}，
];
类MyListItem扩展了React.PureComponent{
状态={
所选：真
}
_onPress=（）=>{
这是我的国家({
已选定：！this.state.selected
})
};
render（）{
const text=this.state.selected？“follow”：“unfollow”；
返回(
{this.props.title+“”+text}
);
}
}
导出默认类MultiSelectList扩展React.PureComponent{
_keyExtractor=（项，索引）=>item.id；
_renderItem=（{item}）=>(
);
render（）{
返回(
);
}
}

每个平面列表项必须有自己的选中状态。为此，我假设将FlatList项导出到组件。这个组件有自己的选中状态。我不能让你可以为它写一个代码段，或者演示如何像我的设计一样更改视图你只需要为RowItem创建一个单独的组件。render方法应在renderItem方法中返回视图块。然后，您可以像我的示例中那样单独保留每个行项目的状态。@Tanveerbyn如果您仍然有任何困惑，请通知meYaa我刚刚创建了它，但我需要它，就像我在代码中写的那样，这就是我为什么感到困惑的原因。。我是诺布。