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

Question

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

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

它工作正常，但我们的要求发生了变化，我们不希望 Accordion 点击​​功能，即 Accordion 不应该在点击时展开。我可以通过创建一个单独的 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 或 react-native-collapse-view ，它还以编程方式为单个元素提供打开和关闭（可能对多个元素使用平面列表）。您可以使用 animate api/layoutanimation api，因为您可以创建自己的组件并满足您的需求，您可以找到更多关于它们的信息here 和 here，但是该模块现在拥有您需要的一切，所以我不会不再建议了。