时间戳

首页 > 解决方案 > 为每个项目更改 Flatlist 中的文本

react-native - 为每个项目更改 Flatlist 中的文本

问题描述

嘿伙计们，我想知道如何更改 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 中的每个项目的关注和取消关注之间切换。

标签： react-nativereact-native-android

解决方案

您可以直接使用此示例。我刚刚使用了官方文档中的一些代码。您分别保留每个列表项状态。您可以根据需要轻松调整此代码

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

推荐阅读