原生反應的新手，按鈕似乎不能單獨工作

Question

我試圖讓每個按鈕在按下時激活並“打開”，並且我使用了一些文檔來幫助我。 但是，現在它沒有打開。

代碼在 FlatList 中添加開關數據應如下所示： https ://imgur.com/a/761PSjre

另外，請隨意判斷我的代碼到地獄最黑暗的深處。 我正在嘗試改進我的代碼。

import React from 'react'
import {StyleSheet, View,Text, Switch, Button, Alert, ScrollView, FlatList, SafeAreaView} from 'react-native'
    
    export default () => {
        const DATA = [
            {
                index: 1,
                title: 'Toggle Night Mode',
            },
            {
                index: 2,
                title: 'Remind me to take a break',
            },
            {
                index: 3,
                title: "Remind me when it's bedtime",
            },
    
        ];

        const [enabledSwitches, setEnabledSwitches] = React.useState(DATA.length);
        
        const toggleSwitch = () => setEnabledSwitches(previousState => !previousState);

        function Item({title, index}) {
            return (
                <View>
                    <Text style={styles.text}> {title} </Text>
                    <Switch    
                        trackColor={{ false: "#767577", true: "#81b0ff" }}
                        thumbColor="#f5dd4b"
                        ios_backgroundColor="#3e3e3e"
                        value={enabledSwitches[index]}
                        onValueChange={() => toggleSwitch(switches => {
                            switches[index] = !switches[index];
                            return switches;
                            })}
                    />
                </View>
            )
        }
    
    
    
        function Header(){
            return(
                <View style = {styles.header}>
                    <Text style={styles.headertext}>Settings</Text>
                </View>
            )
        }
        
        return (
            <>
            <View style = {styles.container}>
                <FlatList
                    data = {DATA}
                    keyExtractor = {item => item.id}
                    renderItem = {({ item, index }) => <Item title={item.title} index={index} /> }
                    ListHeaderComponent = {Header()}
                />

            </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'
        }
    })

Answer 1

試試這個方法

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'},...]);

        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>    
            </>
        
        );
    }