如何獲取本地手風琴的 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>
        );
    }