如何在 react-native-collapsible 中隐藏手风琴内容

Question

我在我的应用程序中使用 react-native-collapsible 来实现手风琴视图。

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

它工作正常，但我们的要求发生了变化，我们不希望手风琴点击功能，即手风琴不应在点击时展开。我可以通过创建一个单独的 div 来做到这一点，但我正在考虑重新使用相同的 react-native-collapsible 并实现相同的工作。

手风琴代码-

    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}
      />
    );
  }
}

因此，为了实现这一点，我试图从 Accordion 中完全删除 renderContent 函数，但这给了我错误 -

TypeError: renderContent is not a function

有人可以告诉我是否有办法在重用相同代码库的同时隐藏 Accordion 内容。非常感谢任何帮助。

Answer 1

所以...你想隐藏手风琴，并禁用触摸扩展功能，那么你不需要手风琴，只需使用 react native 的动画 api。但是，该模块具有 disabled 属性以禁用用户交互，以及 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 示例会有所帮助。

编辑

是的，要禁用触摸反馈，您可以在 touchableComponent 属性中使用 touchablewithoutfeedback（参见代码 avobe）。作为替代方案，您可以使用 this module fork or react-native-collapse-view , wich also offers open and close programatically for individual elements (maybe use a flatlist for multiple). You can use the animate api / layoutanimation api , since you can create your own component and fit it to your needs , you can find more about them here and here，但该模块拥有您现在需要的一切，因此我不再建议您使用它。

如何在 react-native-collapsible 中隐藏手风琴内容

How can I hide Accordion Content in react-native-collapsible

react-native

react-native-collapsible