react-native - React Native Flatlist 文本更改
问题描述
我更改了与答案相关的代码。
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>
)
}
我的事情是当触摸任何列表项数据(它来自d数据数组)时,它将更改与具有相同id的data2数组值相关的文本
约翰·多伊1
约翰·多伊2
John Doe3 <- touch then
约翰·多伊1
约翰·多伊2
Sample2 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;
提前感谢您的关注和努力
解决方案
你有两个数据集,所以你需要过滤数据检查这个例子可能对你有用 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>
);
};
推荐阅读
- swift - Swift 中的像素拾取
- c - 如何在C中获得任意根?
- python - 如何获取熊猫中每对唯一列的列值的频率计数?
- regex - 通过 GROK 或 REGEX 从路径获取文件名
- java - 如何检查我的设备是否已连接(IOTCore - GCP)
- json - 从 Axios 中的响应映射字段?
- python - GridSearchCV.fit 显示 TypeError 时遇到问题
- python - 来自 SQL Select 语句的冒泡排序
- php - 为什么 get_memory_peak_usage() 大于 get_memory_usage()
- php - 如何从 Wordpress 中的 functions.php 中删除默认元标题?