对使用子项创建列表的本机组件有什么反应

Question

对创建带有子项的列表的本机组件有何反应？我检查了一下文档，它可能是平面列表，但是平面列表并没有说明在子项目中滑动。

Answer 1

您可以使用<FlatList>来有效显示大列表。如果列表很大，建议使用此<FlatList>。然后，您可以在<TouchableWithoutFeedback>中包含列表的每个内容，并提供onPress事件处理程序。 例如。

<FlatList>
    <TouchableWithoutFeedback onPress={/*---include your selection logic here*/}>
        /* your content come here */
    </TouchableWithoutFeedback>
</FlatList>

此外，如果您要将动画应用于下拉列表，我建议您使用<LayoutAnimation>

Answer 2

您可以使用react-native-collapsible。

它将帮助您实现相同的目的，并且您可以通过创建可自定义的视图来设计自己的样式。

安装

npm install --save react-native-collapsible

示例

import React, { Component } from 'react-native';
import Accordion from 'react-native-collapsible/Accordion';

const SECTIONS = [
  {
    title: 'First',
    content: 'Lorem ipsum...'
  },
  {
    title: 'Second',
    content: 'Lorem ipsum...'
  }
];

class AccordionView extends Component {
  state = {
    activeSections: []
  };

  _renderSectionTitle = section => {
    return (
      <View style={styles.content}>
        <Text>{section.content}</Text>
      </View>
    );
  };

  _renderHeader = section => {
    return (
      <View style={styles.header}>
        <Text style={styles.headerText}>{section.title}</Text>
      </View>
    );
  };

  _renderContent = section => {
    return (
      <View style={styles.content}>
        <Text>{section.content}</Text>
      </View>
    );
  };

  _updateSections = activeSections => {
    this.setState({ activeSections });
  };

  render() {
    return (
      <Accordion
        sections={SECTIONS}
        activeSections={this.state.activeSections}
        renderSectionTitle={this._renderSectionTitle}
        renderHeader={this._renderHeader}
        renderContent={this._renderContent}
        onChange={this._updateSections}
      />
    );
  }
}

您可以使用Properties

自定义视图