javascript - 在 Flatlist 项目中 react Native ref。仅返回最后一件商品

Question

我正在使用 React Native Flatlist 组件创建可折叠列表。

我使用 ref 属性来点击项目。

但是当我尝试从点击事件访问 ref 时，它不会对点击的项目生效，而是对 flatlist 中的最后一个项目生效。

export default class Update extends Component {

renderItems (data, index) {
    return (
        <TouchableNativeFeedback
            onPress={() => this.expandView()}
        >
            <View style={[styles.itemWrapperExpandable]}>
                <View style={styles.itemHeader}>
                    <View style={styles.itemAvatar}>
                        <Image source={require('../images/logo.png')} style={styles.avatar}></Image>
                    </View>
                    <View style={styles.itemContent}>
                        <Text style={[styles.itemTitle, styles.black]}>{data.name}</Text>
                        <Text style={[styles.rating, styles.grey]}>
                            {data.rating}<Icon name="star"></Icon>
                        </Text>
                        <Text style={[styles.content, styles.black]}>{data.description}</Text>
                    </View>
                    <View style={styles.itemBtn}>
                        <Icon name="chevron-down" style={{ color: '#000', fontSize: 22 }}></Icon>
                    </View>
                </View>
                <View ref={(e) => this._expandableView = e } style={[styles.itemBody]}>
                    <Text style={styles.itemBodyText}>
                        some more information about this update will appear here
                        some more information about this update will appear here
                </Text>
                </View>
            </View>
        </TouchableNativeFeedback>
    );
}

expandView () {
    LayoutAnimation.easeInEaseOut();
    if (this._expandableView !== null) {
        if (!this.state.isExpanded) {
            // alert(this.state.isExpanded)
            this._expandableView.setNativeProps({
                style: {height: null, paddingTop: 15, paddingBottom: 15,}
            })
        }
        else {
            this._expandableView.setNativeProps({
                style: {height: 0, paddingTop: 0, paddingBottom: 0,}
            });
        }


        this._expandableView.setState(prevState => ({
            isExpanded: !prevState
        }));
    }
}

render() {
    return (
        <FlatList
            data={this.state.data}
            renderItem={({ item, index }) => this.renderItems(item, index)}
        />
    )
}

我也尝试过使用项目的索引来放置，但无法正常工作。

有什么办法解决这个问题吗？我认为当项目正在渲染时，ref 会被下一个覆盖。

Answer 1

您的假设是正确的。 Ref 正在覆盖下一个项目，因此 ref 是最后一个项目的 ref。您可以使用类似下面的内容分别设置每个项目引用。

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

当然，此解决方案假定您在项目数据中具有唯一 ID 或排序。