Блог

какой компонент react native для создания списка с подпунктами? Я проверил документы, это может быть flatlist, но в flatlist ничего не говорится о скольжении в подпункте.

Вы можете использовать <FlatList> для эффективного отображения большого списка. Это <FlatList> рекомендуется, если у вас большой список. Затем вы можете содержать каждое содержимое списка в <TouchableWithoutFeedback> и предоставлять обработчик событий onPress. например.

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

Кроме того, если вы хотите применить анимацию к выпадающему списку, я бы рекомендовал вам использовать <LayoutAnimation>

Вы можете использовать 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}
      />
    );
  }
}
  

Вы можете настроить представление с помощью свойств