如何 select 列表中的项目并将其存储在 state React Native

Question

我很难解决这个逻辑，希望有人能提供帮助。 当按下地址 2 时，我想获取该值并用它替换地址 1。 我怎样才能 select 项目并将其存储在 state 或用它替换地址 1？？？ 下面是我的代码：

 const [collapse, setCollapse] = useState(false);

 <Collapse
          style={styles.locationContainer}
          isCollapsed={collapse}
          onToggle={(isCollapsed) => setCollapse(isCollapsed)}
        >
          <CollapseHeader>
            <View onPress={() => setCollapse(!collapse)}>
              <Text style={styles.title}>Choose location</Text>
              <View style={styles.friendsContainer}>
                <View style={styles.itemsContainerLocation}>
                  <Text style={styles.subTitle}>Address 1</Text>
                  <Text style={styles.default}>(default)</Text>
                </View>
                {collapse ? (
                  <Ionicons name="ios-arrow-up" size={24} color="black" />
                ) : (
                  <Ionicons name="ios-arrow-down" size={20} color="black" />
                )}
              </View>
            </View>
          </CollapseHeader>
          <CollapseBody>
            <View style={styles.adressesContainer}>
              <TouchableOpacity>
                <Text style={styles.adressesName}>Address 2</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.adressesContainer}>
              <TouchableOpacity>
                <Text style={styles.adressesName}>Address 3</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.adressesContainer}>
              <TouchableOpacity>
                <Text style={styles.adressesName}>Address 4</Text>
              </TouchableOpacity>
            </View>
          </CollapseBody>
        </Collapse>

Answer 1

请参阅state 和 lifecycle 上的 React 教程。

类似于

const addresses = ['Address1', 'Address2', ...];

const [selectedAddressIndex, setSelectedAddressIndex] = useState(0);

// render selected address
<>
  <Text>{addresses[selectedAddressIndex]}</Text>
</>

// render each selectable address inside a TouchableOpacity
<>
  {
    addresses.map((address, index) => (
      <TouchableOpacity key={index} onPress={() => setSelectedAddressIndex(index)}>
        <Text>{address}</Text>
      <TouchableOpacity/>
    ))
  }
</>

应该为你工作。

map是js中强大的数组方法，可以让你为数组中的元素构建相同的组件。

TouchableOpacity 中的onPress是接受回调TouchableOpacity的 prop，当触发onPress事件时调用回调 function () => setSelectedAddressIndex(index) 。

此外，react-native 推荐了一个新的Pressable组件，取代了TouchableOpacity 。