Как я могу скрыть Аккордеонный Контент в реакции-нативный-разборный - PullRequest
Новая
       13

Как я могу скрыть Аккордеонный Контент в реакции-нативный-разборный

0 голосов
/ 04 января 2019

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

https://github.com/oblador/react-native-collapsible

Это работает нормально, но мы получили изменение в требованиях, когда мы не хотим, чтобы функциональность щелчка Аккордеона, т. Е. Аккордеон не должен расширяться при щелчке. Я могу сделать это, создав отдельный div, но я думаю о работе по повторному использованию одного и того же реагирующего-нативного-разборного и достижения того же самого.

Код для Аккордеона- 

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

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


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

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

Итак, чтобы добиться этого, я пытаюсь полностью удалить функцию renderContent из моего Аккордеона, но это дает мне ошибку - 

TypeError: renderContent is not a function

Может кто-нибудь сообщить мне, если есть способ, которым я могу скрыть содержимое Accordion, используя ту же кодовую базу. Любая помощь очень ценится.

1 Ответ

0 голосов
/ 04 января 2019

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

<Accordion
        sections={SECTIONS}
        activeSections={this.state.activeSections}
        renderSectionTitle={this._renderSectionTitle}
        renderHeader={this._renderHeader}
        renderContent={this._renderContent}
        onChange={this._updateSections}
        disabled={true} //add this 
        touchableComponent={TouchableWithoutFeedback} //here to disable animation
      />

Это то, что вы хотите? было бы полезно, если бы вы разместили изображение или пример gif.

EDIT

Да, чтобы отключить обратную связь касанием, вы можете использовать touchable без обратной связи в свойстве touchableComponent (см. Код avobe). В качестве альтернативы вы можете использовать этот модуль fork или response-native-collapse-view, который также предлагает программно открывать и закрывать отдельные элементы (возможно, использовать плоский список для нескольких элементов). Вы можете использовать api animate api / layoutanimation, поскольку вы можете создать свой собственный компонент и подогнать его под свои нужды, вы можете найти больше информации о них здесь и здесь , но модуль имеет все, что вам нужно на данный момент, так что я бы больше не советовал.

...