1

我正在开发一个应用程序，react-native在这个应用程序中使用我声明一个数组来保存项目的详细信息。FlatList使用这个数组，我设法将数组内所有对象的数据获取到一个平面列表，但是我不想显示数组中的所有对象，而是想使用下拉选择器和按钮来获取某些项目及其详细信息一次一个。

这是FlatList我用来获取数组项的模板FlatList

    const ListItem = ({ item, onSubtract, onAdd }) => (
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          paddingVertical: 12,
          paddingHorizontal: 10,
          borderBottomWidth: 1,
          borderColor: "#ddd",
        }}>
    
        <View style={{ flexDirection: 'row',}}>
          <Text style={styles.cardText} >{item.name} </Text>
        </View>
    
        <View style={{ flexDirection: 'row',}}>
    
        <TouchableOpacity style={styles.icons}  onPress={onSubtract} >
        <FontAwesomeIcon style={styles.startIcon} icon={faMinusSquare} size={25} />
        </TouchableOpacity>
    
          <Text style={{color: '#fff',
                        fontSize: 16,
                        marginLeft: 5,
                        marginRight: 5,
                        fontFamily: 'Poppins-Medium',}} >{item.quantity}</Text>
          
          <TouchableOpacity style={styles.icons}  onPress={onSubtract} >
          <FontAwesomeIcon style={styles.startIcon} icon={faPlusSquare} size={25}  onPress={onAdd} />
          </TouchableOpacity>
          
    
        </View>
        
        <Text style={styles.cardText} > {Math.round((item.price * item.quantity) * 100) / 100} </Text>
        <Text style={styles.cardText}> {Math.round(((item.price * item.quantity) * 0.05) * 100) / 100} </Text>
      </View>
    );

这是声明的数组和函数

    const [quantity, setQuantity] = useState(0);
      const [selectedProduct, setSelectedProduct] = useState();
      const [products, setProducts] = React.useState([
        { _id: 1, name: 'Item 1', price: 300.00, tax: 0, quantity: quantity },
        { _id: 2, name: 'Item 2', price: 29.00, tax: 0, quantity: quantity },
        { _id: 3, name: 'Item 3', price: 200.00, tax: 0, quantity: quantity },
      ]);
    
    
      const onSubtract = (item, index) => {
        const nextProducts = [...products];
        nextProducts[index].quantity -= 1;
        setProducts(nextProducts);
      };
    
      const onAdd = (item, index) => {
        const nextProducts = [...products];
        nextProducts[index].quantity += 1;
        setProducts(nextProducts);
      };
    
      let totalQuantity = 0;
      let totalPrice = 0;
      let totalTax = 0;
      let totalPriceOfTheInvoice = 0;
      products.forEach((item) => {
        totalQuantity += item.quantity;
        totalPrice += item.quantity * item.price;
        totalTax += item.quantity * (item.price * 0.05);
        totalPriceOfTheInvoice = totalPrice + totalTax;
      });

return (
    <SafeAreaView style={{ flex: 1 }}>

      <View >
        <Picker
          style={{ color: '#fff' }}
          selectedValue={selectedProduct}
          onValueChange={setSelectedProduct}
        >
          {products.map(item => (
            <Picker.Item label={item.name} value={item._id} />
          ))}
        </Picker>
      </View>

      <Button title="getDetails" onPress={onSendSelectDetailsToFlatList} />


      <FlatList
        data={products}
        renderItem={({ item, index }) => (
          <ListItem
            item={item}
            onSubtract={() => onSubtract(item, index)}
            onAdd={() => onAdd(item, index)}
          />
        )}
        keyExtractor={(item) => item._id}
      />

    </SafeAreaView>
      );
    };

上面是下拉选择器和FlatList. 在此代码中，所有数组对象和详细信息都显示在平面列表中。但是，在我想使用上面的 ListItem 模板在平面列表中使用按钮按下功能显示它之后，我希望在使用所选项目名称的 id 时从下拉列表中选择数组项目名称。同样，在保留添加的数组详细信息的同时，我想使用按钮按下按钮将另一个选定的详细信息数组添加到平面列表中。有什么办法吗？我尝试了很多方法，但每次平面列表都会显示整个数组。

不喜欢这样显示

我想使用下拉选择器这样显示

4

0 回答 0