替换数组react native中的item

Question

我是js和react-native的新手。我的应用程序上有切换语言的按钮，一个"英语"按钮;和一个按钮"字体"

const langues = [
{
id:0,
title: 'Français',
selected: true
},
{
id:1,
title: 'English',
selected: false
}
];
function Settings() {
return(
<View>
{langues.map(({title,selected}) => (
<View>
<Pressable style={styles.LanguesButton} >
{selected && <AntDesign size={15} name={'checkcircle'} /> }
<Text style={ {paddingLeft:selected ? 15 : 30} }>{title}</Text>
</Pressable>
</View>
))}
</View>
)
}

当我点击"English"时，我想将selected设置为英语true，法语false;"法国"也是一样。但我不知道该怎么做。

PS:我已经看到这里有类似的主题，但就像我说的，我是这门语言的新手，我不理解这些主题的解释^^'。

Answer 1

首先你需要创建一个状态对象，告诉react native在它被更新时进行渲染;

import { useState } from "react";
const [languages, setLanguages] = useState([
{
id: 0,
title: 'Français',
selected: true
},
{
id: 1,
title: 'English',
selected: false
}

]);

然后呈现这个列表。无论何时按下任何语言，都可以通过调用setLanguages函数来修改状态，如下所示:

const onPressed = (title) => {
let temp = [...languages];
temp.forEach(lang => {
if (lang.title == title) {
lang.selected = true;
}
else {
lang.selected = false;
}
});
setLanguages(temp);

}

function Settings() {
return (
<View>
{languages.map(({ title, selected }) => (
<View>
<Pressable style={styles.LanguesButton} onPress={() => {
onPressed(title);
}}>
</Pressable>
</View>
))}
</View>
)
}

每次按下后，你将设置状态，屏幕将知道有一个变化和渲染。

Answer 2

通过onPress查找，例如:

<Pressable onPress={ () => 
langues.find(lang.title === title).selected = true}>

https://reactnative.dev/docs/pressable onpress