React Native - 如何选择多个项目并显示它们？

Question

我想显示选定的项目，但我遇到的情况是不显示图像，而只显示

backgroundColor

。

uri

中有图像

productData

，所以我想显示

uri

。我遇到的另一个问题是

CheckBox

未选中。

我的代码如下：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 100,
  },
  topContainer: {
    flexDirection: 'row',
    marginHorizontal: 15,
    paddingBottom: 20,
    paddingTop: 10,
    borderBottomWidth: 0.5,
    borderColor: colors.very_light_pink,
  },
  iconWrap: {
    width: 60,
    height: 60,
    borderRadius: 6,
    backgroundColor: '#cccccc',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 5,
  },
  icon: {
    width: 20,
    height: 20,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginHorizontal: 15,
    marginBottom: 15,
  },
});

const productData = [
  {
    id: 0,
    productName: 'a',
    price: 45000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/8211/407/250/73/w/563/8211407250_2_1_1.jpg?ts=1613387641299',
  },
  {
    id: 1,
    productName: 'b',
    price: 45000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/0526/407/707/2/w/1280/0526407707_6_1_1.jpg?ts=1610451943259',
  },
  {
    id: 2,
    productName: 'c',
    price: 129000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/0706/442/710/2/w/563/0706442710_2_1_1.jpg?ts=1614254205907',
  },
  {
    id: 3,
    productName: 'd',
    price: 139000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/0706/431/446/2/w/563/0706431446_2_1_1.jpg?ts=1613386951068',
  },
  {
    id: 4,
    productName: 'e',
    price: 189000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/4162/536/401/2/w/1280/4162536401_1_1_1.jpg?ts=1613122054256',
  },
  {
    id: 5,
    productName: 'f',
    price: 89000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/4165/537/430/2/w/563/4165537430_1_1_1.jpg?ts=1613122064808',
  },
];

const LiveAddProducts = (props) => {
  const [productClicked, setProductClicked] = useState(null);
  const [selectedProducts, setSelectedProducts] = useState([]);

  useEffect(() => {
    if (productClicked !== null) {
      setSelectedProducts((prevState) => [
        ...prevState,
        // I believe this should be changed
        { id: prevState.length, image: productClicked },
      ]);

      setProductClicked(null);
    }
  }, [productClicked]);

  console.log(selectedProducts.image);

  return (
    <View style={[styles.container]}>
      <View style={[styles.topContainer]}>
        <TouchableOpacity style={[styles.iconWrap]}>
          <Image source={assets.live_add_icon} style={[styles.icon]} />
        </TouchableOpacity>

        {selectedProducts.map((item, index) => (
          <TouchableOpacity style={[styles.iconWrap]} key={item.id}>
            <Image source={{ uri: productData.image }} style={[styles.icon]} />
          </TouchableOpacity>
        ))}
      </View>

      <ScrollView style={{ paddingTop: 20 }}>
        {productData.map((item, index) => (
          <View style={[styles.row]}>
            <ProductsList
              price={item.price}
              image={item.image}
              productName={item.productName}
            />
            // Any problems here?
            <CheckBox
              size={20}
              onPress={() => setProductClicked(index)}
              source={
                productClicked === index
                  ? assets.icon_check_on
                  : assets.checked_off
              }
            />
          </View>
        ))}
      </ScrollView>
      <BottomButton
        btnText={'Add Items'}
        buttonStyle={{ height: 50, backgroundColor: colors.iris }}
      />
    </View>
  );
};

LiveAddProducts.propTypes = {};

export default LiveAddProducts;

有问题的图像：

Answer 1

  useEffect(() => {
    if (productClicked !== null) {
      setSelectedProducts((prevState) => [
        ...prevState,
        // I believe this should be changed
        { id: prevState.length, image: productClicked },
      ]);

      setProductClicked(null);
    }
  }, [productClicked]);

在这里，您需要将其替换为元素的索引

id: prevState.length

还有，

        {selectedProducts.map((item, index) => (
          <TouchableOpacity style={[styles.iconWrap]} key={item.id}>
            <Image source={{ uri: productData.image }} style={[styles.icon]} />
          </TouchableOpacity>
        ))}

这里，uri 应该是 item.image，因为这是在循环中渲染项目时保存项目数据的位置

Answer 2

尝试这个轻量级且完全可定制的包rn-multipicker

完整文章：https://dev.to/rahul04/add-multi-select-dropdown-to-react-native-applications-53ef

import { RNMultiSelect } from 'rn-multipicker';

const COUNTRIES = [
"Afghanistan",
"Albania",
"Algeria",
"American Samoa",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Antigua and Barbuda",
"Argentina",
];

const App() {
  const [selectedItems, setSelectedItems] = useState<string[]>([]);

  return (
    <View style={{flex: 1}}>
       <RNMultiSelect placeholder="Countries" data={COUNTRIES} onSelectedItemsChange={(value) => setSelectedItems(value)} selectedItems={selectedItems} />
    </View>
  );
} 

Linkedin 帖子