FlatList内部的react本机模态不起作用

Question

。。。我在react原生模态点击更改平面文本中遇到了问题。

我想当我点击模式ok按钮时，接受文本在平面列表中更改为挂起的

这是我的密码。。。

我遇到了反应本机模式点击更改平面按钮颜色的问题。

我想当我点击模式ok按钮时，接受文本在平面列表中更改为挂起的

这是我的密码。。。

我是新手，我尝试了很多次来解决问题，但都失败了，请帮忙。。。

import React from 'react';
import { SafeAreaView, View, FlatList,Pressable, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];

const App = () => {
const [active, setactive] = useState(false);
const renderItem = ({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
<Pressable  onPress={() => setactive(!active)}>
<Text>accept</Text>
</Pressable>
</View>
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
<Modal
animationType="slide"
transparent={true}
visible={active}
onRequestClose={() => {
setDetails(null)
console.warn("closed");
}}>
<Pressable  onPress={() => [handleListing(), setactive(!active)]}>
<Text>ok</Text>
</Pressable>
</>Modal
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;

Answer 1

我没有完全理解，但据我所知，你正在努力做到这一点；

用以下行更改接受文本：

<Text>{modalOkPressed ? "Pending" : "accept"}</Text>

则将该使用状态添加到"下面；active setactive"；

const [modalOkPressed, setModalOkPressed] = useState(false)

则替换包含"；ok"；用这条线；

<Pressable onPress={() => [setactive(!active), setModalOkPressed(true)]}>

现在当你按下"；Ok"modalOkPressed将等于true；挂起"；而不是"；接受"；。

您可以在一行中使用if-else语句，如下所示：

{modalOkPressed ? "Pending" : "accept"}

Answer 2

这是我的结果：我认为@Emreözcan的结果是正确的。当前代码正在尽可能多地维护原始代码。我只是安排了他们。

import React from 'react';
import { SafeAreaView, View, FlatList,Pressable, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const App = () => {
const [active, setactive] = useState(false);
const [modalOkPressed, setModalOkPressed] = useState(false);
const renderItem = ({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
<Pressable onPress={() => {
setactive(!active);
}}>
<Text>
{modalOkPressed ? "Pending" : "accept"}
</Text>
</Pressable>
</View>
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
<Modal
animationType="slide"
transparent={true}
visible={active}
onRequestClose={() => {
setDetails(null)
console.warn("closed");
}}>
<Pressable  onPress={() => {
handleListing();
setactive(!active);
setModalOkPressed(true);
}}>
<Text>ok</Text>
</Pressable>
</Modal>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;

Answer 3

我想我明白了，你可以向flatlist添加额外的数据；

创建一个名为selectedIndex的状态(或者你想要的任何状态(，并使用onPress Function、设置selectedIndex值

我们在数据中有唯一的id，所以我们可以设置selectedIndex(item.id(，然后创建单行if-else语句来检查我们选择(按下(的id是否等于selectedIndex，然后根据它返回文本

你现在可以试试这个代码吗？

const App = () => {
const [active, setactive] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(null)
const renderItem = ({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.title}</Text>
<Pressable onPress={() => {
setactive(!active);
setSelectedIndex(item.id);
}}>
<Text>
{selectedIndex === item.id ? "Pending" : "Accept"}
</Text>
</Pressable>
</View>
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
extraData={selectedIndex}    // add extra data to flatlist
/>
<Modal
style={styles.modal}
animationType="slide"
transparent={true}
visible={active}
onRequestClose={() => {
setDetails(null)
console.warn("closed");
}}>
<Pressable onPress={() => {
handleListing();
setactive(!active);
}}>
<Text>Ok</Text>
</Pressable>
</Modal>
</SafeAreaView>
);}