如何获取本地手风琴的 header 组件中每个项目的索引？ （反应原生）

Question

我正在使用native-base的 Accordion 从对象数组中呈现我的常见问题解答列表。 我无法在自定义渲染方法_renderHeader方法中获取每个渲染项的索引。 这是我目前正在使用的代码。

class FAQs extends Component {
    constructor(props) {
        super(props)
        this.state = {
            faqs: [
                {
                    "title": "This is the first question",
                    "description": "Answer to the first question"
                },
                {
                    "title": "This is the second question",
                    "description": "Answer to the second question"
                },
                {
                    "title": "This is the third question",
                    "description": "Answer to the third question"
                },
                {
                    "title": "This is the fourth question",
                    "description": "Answer to the fourth question"
                }
            ]
        }
    }

    _renderHeader = (item, expanded) => {
        return (
            <View>
                <View style={{paddingHorizontal: 5}}>
                    <Text style={{ fontSize: 14, color: 'white' }}>
     ------------>    // want to add index of each item here
                    </Text>
                </View>
                <View style={{paddingHorizontal: 5}}>
                    {expanded
                        ? <Icon type={"AntDesign"} style={{ fontSize: 18, color: 'white' }} name="upcircleo" />
                        : <Icon type={"AntDesign"} style={{ fontSize: 18, color: 'white' }} name="downcircleo" />}
                </View>
            </View>
        );
    }
    _renderContent = (item) => {
        return (
            .....
        );
    }

    render() {
        return (
            <SafeAreaView style={[styles.container, { backgroundColor: '#517283' }]}>
                ........
                ........
                ........
                ........
                    <Accordion
                        style={{
                            borderWidth: 0
                        }}
                        dataArray={this.state.faqData}
                        animation={true}
                        expanded={true}
                        renderHeader={this._renderHeader}
                        renderContent={this._renderContent}
                    />
                ........
                ........
                ........
                ........
            </SafeAreaView>
        );
    }
}

最初，我想检查native-base Accordion是否提供任何索引参数。 但是，后来我发现不是这样。 下面是 Accordion 道具的片段，它表明renderHeader function 只有 2 个参数item和一个expandable的 boolean

interface Accordion extends Testable {
        dataArray: Array<any>;
        headerStyle?: RnViewStyleProp;
        contentStyle?: RnViewStyleProp;
        renderHeader?: (item: any, expanded: boolean) => React.ReactElement<any>;
        renderContent?: (item: any) => React.ReactElement<any>;
        expanded?: number;
        icon?: string;
        expandedIcon?: string;
        iconStyle?: RnTextStyleProp;
        expandedIconStyle?: RnTextStyleProp;
        style?: RnViewStyleProp;
}

任何帮助表示赞赏。 谢谢：）

Answer 1

从官方native-base的这个 GitHub 问题中发现这个逻辑很有帮助

https://github.com/GeekyAnts/NativeBase/issues/2480#issuecomment-482956365

我相应地修改了我的_renderHeader方法并且它有效。

 _renderHeader = (item, expanded) => {
        return (
            <View>
                <View style={{paddingHorizontal: 5}}>
                    <Text style={{ fontSize: 14, color: 'white' }}>
                      {this.state.faqData.findIndex(e=> e.faqid===item.faqid)+1)}
                    </Text>
                </View>
                <View style={{paddingHorizontal: 5}}>
                    {expanded
                        ? <Icon type={"AntDesign"} style={{ fontSize: 18, color: 'white' }} name="upcircleo" />
                        : <Icon type={"AntDesign"} style={{ fontSize: 18, color: 'white' }} name="downcircleo" />}
                </View>
            </View>
        );
    }