useStateArray布爾切換-ReactNative

初學者開發人員反應原生。

我正在處理設計模式問題，我在同一個組件中有多個 TouchableOpacity（我必須保持這種狀態）。對于每一個，我都有 onPress 功能，可以改變背景和反轉。問題是該函式依賴于 State current statment，當我點擊其中一個時，evreyone 正在改變。

function Grocery({ navigation }) {

  const [isPressed, setIsPressed] = useState(0);
  const onPress = () => setIsPressed(!isPressed);



  return (  
    
    <ScrollView>
      <Button title="home" onPress={() => {FindMatch(GetIngridients());navigation.navigate("MatchedRecipiesScreen");}}>press</Button>
    <View style={styles.container}>
      
    <TouchableOpacity style={styles.button} onPress={() => {AddToPanetry("pasta");onPress();}}  >
    <View style={isPressed && styles.pressedButtonStyle} />
        <Image style={styles.imageright} source={require('../assets/Pastaa.jpg')} />
        <Text> pasta</Text>
      </TouchableOpacity>



      <TouchableOpacity onPress={() => {AddToPanetry("eggs");onPress();}}  >
      <View style={isPressed && styles.pressedButtonStyle} />
        <Image style={styles.imageleft} source={require('../assets/eggs.jpg')} />
        <Text>eggs</Text>
      </TouchableOpacity>




      <TouchableOpacity onPress={() => {AddToPanetry("fish");onPress();}}  >
      <View style={isPressed && styles.pressedButtonStyle} />
        <Image style={styles.imageleft} source={require('../assets/fish.jpg')} />
        <Text>fish</Text>
      </TouchableOpacity>


const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    flexWrap: "wrap",
    padding: 50,
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  }
  ,
  imageleft: {
    borderRadius:100,
    borderWidth:2,
    borderColor:'black',
    height: 120,
    width: 150,
    borderRadius: 80,
    padding:25
  },
  button: {
    alignItems: "center",
   
  },
    tinyLogo: {
    width: 50,
    height: 50,
  },
  pressedButtonStyle: {
    position:"absolute",
    width:150,
    height:121,
    backgroundColor:'black',
    opacity:0.6,
    zIndex:100,
    borderRadius:80
  },
  imageright: {
    borderRadius:100,
    borderWidth:2,
    borderColor:'black',
    height: 120,
    width: 150,
    borderRadius: 80,
    padding:25
  }
});

uj5u.com熱心網友回復：

一種方法是將專案名稱存盤在陣列或物件中，然后檢查是否選擇了特定專案。

這是您可以使用的另一種方法：

const HomeScreen = () => {
    const itemsData = [
        { name: 'Eggs', image: 'image require here', isSelected: false },
        { name: 'Pasta', image: '', isSelected: false },
        { name: 'Fish', image: '', isSelected: false },
    ];

    const [items, setItems] = useState(itemsData);

    const handleSelectItem = (selectedItemIndex) => {
        const itemsToSelect = items.map((item, index) => {
        if (selectedItemIndex === index) item.isSelected = !item.isSelected;
        return item;
        }, []);

        setItems(itemsToSelect);

        // your logic here
        // AddToPanetry(item[selectedItemIndex].name)
    };

    const renderItem = (item, index) => {
        const isSelected = items[index].isSelected;

        return (
        <TouchableOpacity
            style={[styles.button, isSelected && styles.selectedButton]}
            onPress={() => handleSelectItem(index)}>
            {/* <Image source={item.image} /> */}
            <Text>{item.name}</Text>
        </TouchableOpacity>
        );
    };

    return (
        <View>
        <ScrollView>
            {itemsData.map((item, index) => renderItem(item, index))}
        </ScrollView>
        </View>
    );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    padding: 20,
  },
  selectedButton: {
    backgroundColor: 'pink',
  },
});

uj5u.com熱心網友回復：

import * as React from 'react';
import {
  Text,
  StyleSheet,
  TouchableOpacity,
  Button,
  FlatList,
  SafeAreaView,
} from 'react-native';

export default function Grocery({ navigation }) {
  const [state, setState] = React.useState([
    {
      label: 'pasta',
      pressed: false,
    },
    {
      label: 'eggs',
      pressed: false,
    },
    {
      label: 'fish',
      pressed: false,
    },
    {
      label: 'salad',
      pressed: false,
    },
  ]);

  const handlePress = (i) => {
    const newState = [...state];
    newState[i].pressed = !state[i].pressed;
    setState(newState);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        data={state}
        ListHeaderComponent={() => (
          <Button
            title="home"
            onPress={() => {
              console.log('press home');
            }}>
            press
          </Button>
        )}
        renderItem={({ item, index }) => (
          <TouchableOpacity
            key={index}
            id={index}
            onPress={() => handlePress(index)}
            style={[
              styles.flatListTouchable,
              item.pressed && styles.flatListTouchablePressed,
            ]}>
            <Text style={styles.flatListTouchableText}>{item.label}</Text>
          </TouchableOpacity>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  flatListTouchable: {
    width: '100%',
    backgroundColor: 'blue',
    color: 'white',
    padding: 30,
  },
  flatListTouchablePressed: {
    backgroundColor: 'black',
  },
  flatListTouchableText: {
    color: 'white'
  }
});

小吃

標籤：反应 反应原生

上一篇：代碼能跑就不要動，為什么我們都會有這樣的想法？

下一篇：為TypescriptReactNative功能組件創建Promise