反应本机 Flatlist 文本更改

Question

我更改了与答案相关的我的代码。

import React, { useState, } from "react";
import { View, Text, FlatList, SafeAreaView, TouchableOpacity, } from "react-native";


const ToggleButton = (props) => {
    const {
        sample,
        id,
        onPress,
    } = props;
    const [isPressed, setIsPressed] = useState(false);
    const text = isPressed ? `${sample}-${id}` : sample;

    return (

        <TouchableOpacity onPress={() => {
            setIsPressed(!isPressed);
            onPress && onPress();
        }}
        style={{ flex: 1, }}>        
            <View style={{ flex: 1, width: "100%", height: 100, borderWidth: 1, justifyContent: "center", alignItems: "center", }}>
                <Text style={{ fontSize: 20 }}>{ text }</Text>
            </View>
        </TouchableOpacity>
    )
};

const ToggleExample =() => {
    const data = [
        { sample:"John Doe1", id:"1" },
        { sample:"John Doe2", id:"2" },
        { sample:"John Doe3", id:"3" },
        { sample:"John Doe4", id:"4" },
        { sample:"John Doe5", id:"5" },  
    ];
    const data2 = [
      { sample2:"Sample2 Doe1", id:"1" },
      { sample2:"Sample2 Doe2", id:"2" },
      { sample2:"Sample2 Doe3", id:"3" },
      { sample2:"Sample2 Doe4", id:"4" },
      { sample2:"Sample2 Doe5", id:"5" },  
  ];

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <FlatList
            data={data}
            renderItem={entry => {
                const { item } = entry;
                return (<ToggleButton {...item} />);
            }}
            contentContainerStyle={{ padding: 20, }}
            ItemSeparatorComponent={() => { return (<View style={{ flex: 1, height: 10, }}/>) }}
            keyExtractor={(entry, index) => index.toString()}
            />
        </SafeAreaView>
    )
}

我的事情是，当触摸任何列表项数据（它来自数据数组）时，它会更改与具有相同 id 的 data2 数组值相关的文本

李四1

张三

John Doe3 <- 然后触摸

李四1

张三

示例 2 Doe3 <- 将文本更改为此

点赞此文字换行

const text = isPressed ? `${sample}-${id}` : sample;

be like
const text = isPressed ? `${sample2}-${id}` : sample;

如果不行，这种就够了

  const data = [
    { sample: 'John Doe', id: '1' },
    { sample: 'John Doe', id: '2' },
    { sample: 'John Doe', id: '3' },
    { sample: 'John Doe', id: '4' },
    { sample: 'John Doe', id: '5' },
    { sample: 'Samplee2 Doe1', id: '6' },
    { sample: 'Samplee2 Doe2', id: '7' },
    { sample: 'Samplee2 Doe3', id: '8' },
    { sample: 'Samplee2 Doe4', id: '9' },
    { sample: 'Samplee2 Doe5', id: '10' }
  ];
  const text = isPressed ? `${sample}-${id+5}` : sample;

提前感谢您的关注和努力

Answer 1

import React, { useState, } from "react";
import { View, Text, FlatList, SafeAreaView, TouchableOpacity, } from "react-native";


const ToggleButton = (props) => {
    const {
        sample,
        id,
        onPress,
    } = props;
    const [isPressed, setIsPressed] = useState(false);
    const text = isPressed ? `${sample}-${id}` : sample;

    return (

        <TouchableOpacity onPress={() => {
            setIsPressed(!isPressed);
            onPress && onPress();
        }}
        style={{ flex: 1, }}>        
            <View style={{ flex: 1, width: "100%", height: 100, borderWidth: 1, justifyContent: "center", alignItems: "center", }}>
                <Text style={{ fontSize: 20 }}>{ text }</Text>
            </View>
        </TouchableOpacity>
    )
};

const ToggleExample =() => {
    const data = [
        { sample:"John Doe", id:"1" },
        { sample:"John Doe", id:"2" },
        { sample:"John Doe", id:"3" },
        { sample:"John Doe", id:"4" },
        { sample:"John Doe", id:"5" },  
    ];

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <FlatList
            data={data}
            renderItem={entry => {
                const { item } = entry;
                return (<ToggleButton {...item} />);
            }}
            contentContainerStyle={{ padding: 20, }}
            ItemSeparatorComponent={() => { return (<View style={{ flex: 1, height: 10, }}/>) }}
            keyExtractor={(entry, index) => index.toString()}
            />
        </SafeAreaView>
    )
}

export default ToggleExample;

Answer 2

你有两个数据集所以你需要过滤数据检查此示例可能适合您 https://snack.expo.io/@jsfit/223f2c

import React, { useState } from 'react';
import {
  View,
  Text,
  FlatList,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';

const ToggleButton = (props) => {
  const [isPressed, setIsPressed] = useState(false);
  const { sample, id, onPress, item1, item2 } = props;
  const text = isPressed ? item2.sample2 : item1.sample;

  return (
    <TouchableOpacity
      onPress={() => {
        setIsPressed(!isPressed);
        onPress && onPress();
      }}
      style={{ flex: 1 }}>
      <View
        style={{
          flex: 1,
          width: '100%',
          height: 100,
          borderWidth: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text style={{ fontSize: 20 }}>{text}</Text>
      </View>
    </TouchableOpacity>
  );
};

const ToggleExample = () => {
  const data = [
    { sample: 'John Doe1', id: '1' },
    { sample: 'John Doe2', id: '2' },
    { sample: 'John Doe3', id: '3' },
    { sample: 'John Doe4', id: '4' },
    { sample: 'John Doe5', id: '5' },
  ];
  const data2 = [
    { sample2: 'Sample2 Doe1', id: '1' },
    { sample2: 'Sample2 Doe2', id: '2' },
    { sample2: 'Sample2 Doe3', id: '3' },
    { sample2: 'Sample2 Doe4', id: '4' },
    { sample2: 'Sample2 Doe5', id: '5' },
  ];

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        data={data}
        renderItem={(entry) => {
          const { item } = entry;
          return (
            <ToggleButton
              item1={item}
              item2={data2.filter((_item) => _item.id === item.id)[0]}
            />
          );
        }}
        contentContainerStyle={{ padding: 20 }}
        ItemSeparatorComponent={() => {
          return <View style={{ flex: 1, height: 10 }} />;
        }}
        keyExtractor={(entry, index) => index.toString()}
      />
    </SafeAreaView>
  );
};

反应本机 Flatlist 文本更改

React Native Flatlist text change

react-native

react-native-flatlist