Je continue de rencontrer une erreur, je suis nouveau pour réagir natif. Quelqu'un donne une solution possible?
import React from 'react'
import {StyleSheet, View,Text, Switch, Button, Alert, ScrollView, FlatList, SafeAreaView} from 'react-native'
export default () => {
const [isSwitchEnabled, setSwitch] = React.useState(false)
const toggleSwitch = () => setSwitch(previousState => !previousState);
const DATA = [
{
id: '1',
title: 'Toggle Night Mode',
switch: false
},
{
id: '2',
title: 'Remind me to take a break',
switch: false
},
{
id: '3',
title: "Remind me when it's bedtime",
switch: false
},
];
function Item({title}){
return (
<View>
<Text style={styles.text}> {title} </Text>
<Switch
onValueChange= {toggleSwitch}
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor="#f5dd4b"
ios_backgroundColor="#3e3e3e"
value= {isSwitchEnabled}
/>
</View>
)
}
function Header(){
return(
<View style = {styles.header}>
<Text style={styles.headertext}>Settings</Text>
</View>
)
}
return (
<>
<View>
<SafeAreaView style ={styles.container}>
<FlatList
data = {DATA}
keyExtractor = {item => item.id}
renderItem = {( {item} ) => <Item title = {item.title}/> }
ListHeaderComponent = {Header()}
/>
</SafeAreaView>
</View>
<View>
<Button
title = "Clear Search History"
color = "#6fb6f0"
onPress = {() => Alert.alert('Food History Has Been Cleared!')}
/>
</View>
<View>
<Button
title = "Logout"
color = "#6fb6f0"
onPress = {() => Alert.alert('Successfully Logged Out!')}
/>
</View>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 20,
fontWeight: "300"
},
headertext: {
fontSize: 30,
fontWeight: "300"
},
header:{
flex:1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
backgroundColor: '#f5f5f5'
}
})
3 Réponses :
Vous attachez chaque élément avec un état, donc tous vos éléments changent en fonction de ce changement d'état. Pour le corriger, faites de chaque élément un composant avec un état interne pour le contrôler, ou créez dynamiquement un état différent pour chaque élément de votre objet de données. Vous devez créer un état différent pour chaque élément.
Merci, mais pourriez-vous me guider sur la façon de changer la valeur du hook useState en un tableau? Ou comment faire de chaque élément un composant?
Essayez de cette façon
import React from 'react'
import {StyleSheet, View,Text, Switch, Button, Alert, ScrollView, FlatList, SafeAreaView} from 'react-native'
export default () => {
// use data set in default state
const [data, setData] = React.useState([
{
index: 1,
title: 'Toggle Night Mode',
},
{
index: 2,
title: 'Remind me to take a break',
},
{
index: 3,
title: "Remind me when it's bedtime",
},
]);
function toggleSwitch(value, index){
const newData = [...data];
const newData[index].isEnable = value;
setData(newData);
}
function Item({item, index}) {
return (
<View>
<Text style={styles.text}> {item.title} </Text> // use `title` here like this
<Switch
.....
value={item.isEnable || false} // change here
onValueChange={(value) => toggleSwitch(value, index) } // change here
/>
</View>
)
}
return (
<>
<View style = {styles.container}>
<FlatList
data = {data}
keyExtractor = {item => item.id}
renderItem = {({ item, index }) => <Item item={item} index={index} /> } // send `item` as prop
/>
</View>
</>
);
}
Faites-le de cette façon:
const Item = ({ data }) => {
const [isSwitchEnabled, toggleSwitch] = React.useState(data.switch)
return (
<View>
<Text style={styles.text}> {data.title} </Text>
<Switch
onValueChange={() => toggleSwitch(!isSwitchEnabled)}
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor="#f5dd4b"
ios_backgroundColor="#3e3e3e"
value={isSwitchEnabled}
/>
</View>
)
}
export default () => {
const DATA = [
{
id: '1',
title: 'Toggle Night Mode',
switch: false
},
{
id: '2',
title: 'Remind me to take a break',
switch: false
},
{
id: '3',
title: "Remind me when it's bedtime",
switch: false
},
];
function Header() {
return (
<View style={styles.header}>
<Text style={styles.headertext}>Settings</Text>
</View>
)
}
return (
<>
<View>
<SafeAreaView>
<FlatList
data={DATA}
keyExtractor={item => item.id}
renderItem={({ item }) => <Item data={item} />}
ListHeaderComponent={Header()}
contentContainerStyle={styles.container}
/>
</SafeAreaView>
</View>
<View>
<Button
title="Clear Search History"
color="#6fb6f0"
onPress={() => Alert.alert('Food History Has Been Cleared!')}
/>
</View>
<View>
<Button
title="Logout"
color="#6fb6f0"
onPress={() => Alert.alert('Successfully Logged Out!')}
/>
</View>
</>
);
}