代码之家 › 专栏 › 技术社区 › Kpo

编辑平面列表中每个项目的状态

react-native-flatlist state react-native

Kpo · 技术社区 · 5 年前

这是我呈现平面列表的地方

_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>
        );
    }
}

我只想能够有一个列表项目与隐藏设置为假的时候,并说项目设置为隐藏=真时,页面刷新,但我从来没有找到任何可以帮助我。

0 回复 | 直到 5 年前

Kpo 5 年前

所以经过深思熟虑,我终于找到了解决办法。我没有处理每个项目中的隐藏状态,而是列出了与我的平面列表所在的组件中的项目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()}
            />