代码之家 › 专栏 › 技术社区 › techie_questie

如何在react native可折叠中隐藏手风琴内容

react-native-collapsible react-native

0

techie_questie · 技术社区 · 7 年前

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

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

有人能告诉我是否有一种方法可以在重复使用相同的代码库时隐藏手风琴的内容。非常感谢您的帮助。

1 回复 | 直到 7 年前

1

2

RegularGuy 7 年前

所以如果要隐藏手风琴,并禁用触摸时展开功能,则不需要手风琴,只需使用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 here 和 here ,但该模块现在已经具备了您所需的一切,因此我不再建议您使用它。