LayoutAnimation расширяет все списки одним нажатием кнопки - React Native - PullRequest
Новая
       3

LayoutAnimation расширяет все списки одним нажатием кнопки - React Native

0 голосов
/ 20 апреля 2020

У меня есть компонент, в котором я отображаю списки на основе данных из базы данных. Чтобы список работал, я использую Object.entries и помещаю все списки в массив. И позже рендеринг массива внутри метода возврата.

Внутри списка у меня есть вид и кнопка. Вид скрыт по умолчанию. Я использую LayoutAnimation, чтобы расширить список, чтобы отобразить вид по щелчку кнопки. Но когда я нажимаю кнопку, все виды отображаются.

Есть ли лучший способ свернуть и отобразить вид, связанный с конкретным списком. Я только хочу отобразить вид, который я нажимаю на кнопку.

Функция свертывания и отображения вида, 

changeLayout = () => {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        this.setState({ expanded: !this.state.expanded });
    }

А в методе рендеринга я перемещаю списки в массив, 

var lists = [];
Object.entries(this.state.values).forEach(([key, val]) =>
            lists.push(
                <View>
                    <List key={val["val1"]} style={styles.list}>
                        <ListItem>
                            <Body style={{ paddingLeft: 50, paddingRight: 50 }}>
                                <Text>{val["name"]}</Text>
                            </Body>
                            <Right>
                                <TouchableOpacity 
                                    style={styles.button}
                                    onPress = {this.changeLayout}
                                >
                                    <Text style={styles.btnText}>Status</Text></TouchableOpacity>
                            </Right>
                        </ListItem>
                        <View style={{ height: this.state.expanded ? null : 0, overflow: 'hidden' }}>
                        <Text style={styles.text}>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            Lorem Ipsum has been the industry's 
                        </Text>
                    </View>
                    </List>
                </View>
            )

И в методе возврата я называю массив как 

<Content>
   {lists}
</Content>

1 Ответ

0 голосов
/ 20 апреля 2020

Попробуйте этот подход.

ListItem. js

state = {
      expanded: false,
    };
  }

  componentDidUpdate() {
    UIManager.setLayoutAnimationEnabledExperimental &&
      UIManager.setLayoutAnimationEnabledExperimental(true);
    LayoutAnimation.easeInEaseOut();
  }

  render() {
    return (
      <View>
        <TouchableOpacity
          style={styles.row}
          onPress={() => this.toggleExpand()}>
          <Text style={[styles.title, styles.font]}>{this.props.title}</Text>
          <Icon
            name={
              this.state.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'
            }
            size={30}
            color="#000"
          />
        </TouchableOpacity>
        <View style={styles.parentHr} />
        {this.state.expanded && (
          <View style={styles.child}>
            <Text style={styles.detailStyle}>{this.props.data}</Text>
          </View>
        )}
      </View>
    );
  }

  toggleExpand = () => {
    this.setState({expanded: !this.state.expanded});
  };
}

const styles = StyleSheet.create({
  title: {
    fontSize: 16,
    color: '#000',
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: 56,
    paddingLeft: 25,
    paddingRight: 18,
    alignItems: 'center',
    backgroundColor: '#fff',
    borderWidth: 0.1,
    borderColor: '#94979c',
  },
  parentHr: {
    height: 1,
    color: '#f8f8f8',
    width: '100%',
  },
  child: {
    backgroundColor: '#f8f8f8',
    padding: 16,
  },
  detailStyle: {
    textAlign: 'justify',
  },
});

Приложение. js

renderListItem = () => {
    const items = [];
    for (item of this.state.values) {
      items.push(
        <ListItem title={item.title} data={item.description} key={item.id} />,
      );
    }
    return items;
  };

Метод возврата 

<ScrollView>{this.renderListItem()}</ScrollView>

Дайте мне знать, если это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...