React native 如何在react native可折叠中隐藏手风琴内容
我在应用程序中使用react native Collapsable来实现手风琴视图 它工作得很好,但我们得到了一个要求的变化,我们不希望手风琴点击功能,即手风琴不应该扩大点击。我可以通过创建一个单独的div来实现这一点,但我正在考虑一种工作方法,即重用相同的react native collapsible并实现相同的功能 手风琴编码-React native 如何在react native可折叠中隐藏手风琴内容,react-native,react-native-collapsible,React Native,React Native Collapsible,我在应用程序中使用react native Collapsable来实现手风琴视图 它工作得很好,但我们得到了一个要求的变化,我们不希望手风琴点击功能,即手风琴不应该扩大点击。我可以通过创建一个单独的div来实现这一点,但我正在考虑一种工作方法,即重用相同的react native collapsible并实现相同的功能 手风琴编码- const SECTIONS = [ { title: 'First', content: 'Lorem i
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}
/>
);
}
}
有人能告诉我是否有一种方法可以在重复使用相同的代码库时隐藏手风琴的内容。非常感谢您的帮助。所以。。。如果要隐藏手风琴,并禁用触摸时展开功能,则不需要手风琴,只需使用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
/>
或react-native-collapse视图,它还为单个元素提供编程打开和关闭(可能对多个元素使用平面列表)。您可以使用动画api/LayoutImation api,因为您可以创建自己的组件并使其适合您的需要,您可以找到更多关于这些组件的信息,但该模块现在已经具备了您所需的一切,因此我不再建议您使用它。我无法理解“section.content”是如何填充的!如何将其传递到渲染内容?这是一种状态吗?它在链接中,但是我已经更新了代码。我刚刚按照你的建议添加了禁用属性,这确实禁用了手风琴展开。但是,我看到触摸时的颜色发生了一秒钟的变化。而且我不明白你所说的“只使用react native的动画api”是什么意思。我是否需要删除此手风琴并将其实现为普通视图?这不起作用。它给出了“未定义TouchableWithoutFeedback”的错误。您是否从react native导入了TouchableWithoutFeedback?;-;
<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
/>