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

因此，要实现这一点，我试图从我的手风琴中完全删除renderContent函数，但这给了我错误-

TypeError: renderContent is not a function

有人可以让我知道在重用相同代码库时是否可以隐藏手风琴内容。非常感谢您的帮助。

Answer 1

所以...您想隐藏手风琴，并禁用“触摸扩展”功能，那么您不想要手风琴，只需使用react native的动画api。但是，该模块具有disable属性来禁用用户交互，而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，但是该模块具有您需要的一切现在，所以我不再建议了。

我如何隐藏可折叠的手风琴内容

1 个答案: