您好,在我的项目中,我正在使用native-base
的手风琴。我想做的是显示手风琴中从服务器获取的结果。但不幸的是,我无法实现这一目标,因为在手风琴的内容和标题的渲染中,我正在进行条件渲染。所以手风琴我什么也没收到。以下是我的代码以及服务器的json响应。请帮助我找出错误。我真的不知道这是什么错误。请指导。
json
[{
data: {
course: {
name: "I. India Economy CourseWare",
categories: [{
id: 299,
name: "Indian Economy Courseware",
}],
instructor: {
id: "1",
name: "Main Admin",
sub: ""
},
menu_order: 0
},
description: "",
curriculum: [{
key: 0,
id: 0,
type: "section",
title: "A1. India's Economic Development",
},
{
key: 1,
id: "2821",
type: "unit",
title: "1. India as a Developing Economy",
duration: 0,
meta: []
},
{
key: 2,
id: "2864",
type: "unit",
title: "2. Understanding India’s economic transition",
duration: 0,
meta: []
}
]
]
}
我要显示的是手风琴中的内容,我想显示curriculum title
和type=section
作为手风琴headerContent
,并在手风琴内容中显示type=unit
的相应标题。以下是我的代码。我得到的是这个[![在此处输入图片描述] [1]] [1] https://i.stack.imgur.com/4wqgZ.png
代码*
componentWillMount() {
fetch('xxxxxxxx' + this.props.navigation.state.params.id)
.then((response) => response.json())
.then((responseData) =>
this.setState({
details: responseData
})
);
}
render() {
return ( <
Container style = {
styles.container
} >
<
Header
.. <
/Header>
<
Card style = {
{
margin: 10,
backgroundColor: '#f77a6c'
}
} >
...
...
.....
......
<
/Card>
<
View style = {
{
padding: 10
}
} >
{
this.state.details.map(detail =>
<
ScrollView >
{
detail.data.curriculum.map(curr =>
<
Accordion dataArray = {
curr
}
animation = {
true
}
expanded = {
true
}
renderHeader = {
curr.type === "section" ? ( <
Card >
<
CardItem style = {
{
backgroundColor: "green"
}
} >
<
Body >
<
Text >
{curr.title}<
/Text> <
/Body> <
/CardItem> <
/Card>
) : ( < Text > Header < /Text>)}
renderContent = {
curr.type === "unit" ? (
<
Card >
<
CardItem style = {
{
backgroundColor: "lightgreen"
}
} >
<
Body >
<
Text >
{curr.title}<
/Text> <
/Body> <
/CardItem> <
/Card>
) : ( < Text > Content < /Text>)} /
>
)
} <
/ScrollView>
)
}
<
/View> <
/Container>
);
}
}