Изменить состояние каждого элемента FlatList - PullRequest
Новая
       18

Изменить состояние каждого элемента FlatList

1 голос
/ 05 марта 2019

Я сделал страницу, на которой я использую FlatList. Этот FlatList использует компонент элемента, который я сделал, который отображает другой вид под собой при нажатии, устанавливая состояние «скрытый» в false. Основная проблема, с которой я столкнулся, заключается в том, что я не могу найти способ изменить «скрытое» состояние на «истинное» при нажатии на один из элементов, поэтому всегда сохраняю только 1 элемент, отображающий дополнительное представление в то время. В то же время, когда я обновляю / перерисовываю свой 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 на тот момент и сказал, что элемент должен быть установлен как скрытый = true при обновлении страницы, но я не нашел ничего, что могло бы помочь я.

1 Ответ

0 голосов
/ 11 марта 2019

Итак, после долгих раздумий я наконец нашел решение. Вместо обработки скрытого состояния в каждом элементе я составил список каждого скрытого состояния, связанного с идентификаторами элементов в компоненте, в котором находится мой плоский список, добавив функцию, которая установит ранее открытый элемент в скрытый и откроет новый, и передать его в качестве обратного вызова моим элементам, чтобы его можно было вызывать при нажатии на них. 

_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()}
            />
...