0

我在我的应用程序中使用 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

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

4

1 回答 1

2

所以...你想隐藏手风琴，并禁用触摸扩展功能，那么你不想要手风琴，只需使用 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）。作为替代方案，您可以使用此模块 fork 或 react-native-collapse-view ，它还以编程方式为单个元素提供打开和关闭（可能对多个元素使用平面列表）。您可以使用 animate api/layoutanimation api，因为您可以创建自己的组件并满足您的需求，您可以 在此处和此处找到有关它们的更多信息，但是该模块包含您现在需要的一切，所以我不建议使用它了。

于 2019-01-04T16:19:43.897 回答