在Flatlist项目中反应Native ref . 仅返回最后一项

2 回答

• 1

  为了解释React Native文档，应谨慎使用直接操作（即refs）;除非你因为某些其他原因需要它，否则我在这种情况下是必要的 . 通常，跟踪FlatList中所选项目的最佳方法是将 keyExtractor 和 extraData 道具与状态中的Javascript Map 对象结合使用 .

  React能够跟踪正在添加/删除/修改的项目的方式是为每个项目使用唯一的 key prop（最好是id，或者如果列表顺序不会更改，则必要的索引可用） . 在FlatList中，如果您将使用 keyExtractor prop，则会处理"automagically" . 为了跟踪所选项目，我们可以在点击其中时添加/删除Map对象中的项目 . Map是一种对象类型，类似于保存键值对的数组 . 我们将在状态中使用它来为所选的每个项存储键 item.id 和布尔值 true .

  所以，我们最终得到这样的东西：

  export default class Update extends Component {
    state = {
      data: [],
      selected: (new Map(): Map<string, boolean>)
    }
  
    renderItems = ({ item }) => {
      // note: the double ! operator is to make sure non boolean values are properly converted to boolean
      return (
        <ExpandableItem
          item={item}
          selected={!!this.state.selected.get(item.id)}
          expandView={() => this.expandView(item)}
        />
      );
    }
  
    expandView (item) {
      LayoutAnimation.easeInEaseOut();
  
      this.setState((state) => {
        const selected = new Map(state.selected);
        selected.set(item.id, !selected.get(item.id));
        return {selected};
      });
  
      // the above allows for multiple expanded items at a time; the following will simultaneously close the last item when expanding a new one
      // this.setState((state) => {
      //   const selected = new Map();
      //   selected.set(item.id, true);
      //   return {selected};
      // });
    }
  
    render() {
      return (
        <FlatList
          data={this.state.data}
          keyExtractor={(item, index) => `${item.id}`}
          renderItem={this.renderItems}
        />
      );
    }
  }
  
  const ExpandableItem = ({ item, selected, expandView }) => {
    return (
      <TouchableNativeFeedback onPress={expandView}>
        <View style={styles.itemWrapperExpandable}>
          {/* ...insert other header code */}
          <View style={[styles.itemBody, selected && styles.itemBodySelected]}>
            <Text style={styles.itemBodyText}>
              some more information about this update will appear here
            </Text>
          </View>
        </View>
      </TouchableNativeFeedback>
    );
  }
  

  你必须使用 styles.itemBodySelected 来使它看起来如你所愿 . 请注意， renderItem 的单独功能组件 <ExpandableItem /> 不是必需的，我更喜欢构建代码 .

  有用的网址：

  https://facebook.github.io/react-native/docs/flatlist.html

  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

  https://reactjs.org/docs/lists-and-keys.html#keys

  回复于 2024-05-02T06:49:09+08:00
• 0

  你对自己的假设是正确的 . Ref用下一个项目覆盖，所以ref是最后一个项目的ref . 您可以使用类似下面的内容来单独设置每个项目 .

  ref={(ref) => this.refs[data.id] = ref}
  

  当然，此解决方案假设您的商品数据中包含唯一ID或排序 .

  回复于 2024-05-02T06:49:09+08:00