Question

我制作了一个使用FlatList的页面。这个FlatList使用了我制作的项目组件，通过将状态“隐藏”设置为false可以在其下方显示另一个视图。我遇到的主要问题是，当按下其中一项时，我无法找到一种将“隐藏”状态更改为true的方法，因此，始终只保留一次显示其他视图的项目。同时，当我刷新/重新渲染FlatList时，它不会将所有“隐藏”状态都设置为true。

这是我渲染FlatList的地方

_onRefresh() {
    this.setState({refreshing: true}, () => this._loadList());
}

render() {
    return (
        <View style={[style.container, style.whiteBackground]}>
            <CategoryFilter filterCallback={this._changeCategory}/>
            <FlatList
                data={this.state.list}
                extraData={this.state}
                renderItem={({item}) =>
                    <ListItemComponent item={item} category={this.state.category}/>
                }
                refreshing={this.state.refreshing}
                onRefresh={() => this._onRefresh()}
            />
        </View>
    );
}

这是我渲染和显示隐藏视图的地方

constructor(props) {
    super(props);
    this.state = {
        hidden: true
    };
}

componentDidMount() {
    this.setState({hidden: true});
}

_onPress() {
    this.setState({
        hidden: !this.state.hidden
    });
}

[...]

_renderOS(item) {
    if (Platform.OS === 'android') {
        return (
            <TouchableNativeFeedback onPress={() => this._onPress()}>
                {this._renderItem(item)}
            </TouchableNativeFeedback>
        );
    } else if (Platform.OS === 'ios') {
        return(
            <TouchableOpacity onPress={() => this._onPress()}>
                {this._renderItem(item)}
            </TouchableOpacity>
        );
    }
}

[...]

_renderDescription(item) {
    if (this.state.hidden === true) {
        return null;
    } else {
        return (
            <View style={listItemStyle.descriptionContainer}>
                <Text style={listItemStyle.description}>
                    {item.description}
                </Text>
            </View>
        );
    }
}

我只希望当时只有一个隐藏项设置为false的列表项，并且说要在刷新页面时将该项设置为hidden = true，但是我从来没有发现任何有帮助的方法我。

Answer 1

经过深思熟虑，我终于找到了解决方案。我没有处理每个项目中的隐藏状态，而是列出了与我的平面列表所在的组件中的项目ID相关联的每个隐藏状态的列表，添加了一个将先前打开的项目设置为隐藏并打开新项目的函数，然后将其作为回调传递给我的物品，以便在按下它们时可以调用它。

_onPress(id) {
    let items;

    items = this.state.items.map((item) => {
        if (item.id === this.state.openId)
            item.open = false;
        else if (item.id === id)
            item.open = true;
        return item;
    });
    this.setState({
        items: items,
        openId: (id === this.state.openId ? '' : id)
    });
}

            <FlatList
                data={this.state.items}
                extraData={this.state}
                renderItem={({item}) =>
                    <ListItemComponent
                        onPress={this._onPress.bind(this)}
                        bet={item}
                        categoryList={this.state.categoryList}
                        open={item.open}/>
                }
                refreshing={this.state.refreshing}
                onRefresh={() => this._onRefresh()}
            />

编辑FlatList中每个项目的状态

1 个答案: