NativeBase 折叠面板的 "renderHeader " 属性显示参数的未定义值 "expanded"

Question

我正在我的一个反应原生项目中使用原生手风琴.我需要自定义它的标题，为此，我已经浏览了它的文档。文档中提到的方法无法正常工作。当我在警报中检查其值时，_renderHeader(title, expanded)函数的expanded参数显示未定义。它应该给我true或false下面是本机基础文档中给出的代码。谁能指导我如何根据开放式和关闭手风琴给我true或false？

import React, { Component } from "react";
import { Container, Header, Content, Accordion, View, Text } from "native-base";
const dataArray = [
{ title: "First Element", content: "Lorem ipsum dolor sit amet" },
{ title: "Second Element", content: "Lorem ipsum dolor sit amet" },
{ title: "Third Element", content: "Lorem ipsum dolor sit amet" }
];
export default class AccordionCustomHeaderContentExample extends Component {
_renderHeader(title, expanded) {
return (
<View
style={{ flexDirection: "row", padding: 10, justifyContent: "space-between", alignItems: "center", backgroundColor: "#A9DAD6" }}
>
<Text style={{ fontWeight: "600" }}>
{" "}{title}
</Text>
{expanded
? <Icon style={{ fontSize: 18 }} name="remove-circle" />
: <Icon style={{ fontSize: 18 }} name="add-circle" />}
</View>
);
}
_renderContent(content) {
return (
<Text
style={{ backgroundColor: "#e3f1f1", padding: 10, fontStyle: "italic" }}
>
{content}
</Text>
);
}
render() {
return (
<Container>
<Header />
<Content padder>
<Accordion
dataArray={dataArray}
renderHeader={this._renderHeader}
renderContent={this._renderContent}
/>
</Content>
</Container>
);
}
}

Answer 1

此问题与手风琴接口有关，参数中的语法差异(即其代码中缺少扩展参数(。本机基本团队已在几天前解决了此问题。因此，您需要删除node_modules文件夹，然后需要使用以下命令安装插件：

npm install native-base --save
react-native link

我认为，这可能是您面临的问题的原因，请找到"renderHeader"旧代码：

renderHeader?: (item: any) => React.ReactElement<any>;

他们通过添加"扩展"参数修改了"renderHeader"代码，如下所示：

renderHeader?: (item: any, expanded: boolean) => React.ReactElement<any>;

请在此链接中找到更多详细信息 https://github.com/GeekyAnts/NativeBase/issues/2160

希望这对您有所帮助。

Answer 2

_renderHeader({title, expanded}) {
return (
<View
style={{ flexDirection: "row", padding: 10, justifyContent: "space-between", alignItems: "center", backgroundColor: "#A9DAD6" }}
>
<Text style={{ fontWeight: "bold", fontSize:20 }}>
{" "}{title}
</Text>
{expanded
? <Icon style={{ fontSize: 18 }} name="remove-circle" />
: <Icon style={{ fontSize: 18 }} name="add-circle" />}
</View>
);
}
_renderContent({content}) {
return (
<Text
style={{ backgroundColor: "#e3f1f1", padding: 10, fontStyle: "italic" }}
>
{content}
</Text>
);
}

Answer 3

以下内容对我有用：

renderHeader({title}) {
return (
<View
style={{ flexDirection: "row", padding: 10, justifyContent: "space-between", alignItems: "center", backgroundColor: "#A9DAD6" }}
>
<Text style={{ fontWeight: "bold", fontSize:20 }}>
{" "}{title}
</Text>
{arguments[1]
? <Icon style={{ fontSize: 18 }} name="remove-circle" />
: <Icon style={{ fontSize: 18 }} name="add-circle" />}
</View>
);
}