如何获取 native-base 手风琴的 header 组件中每个项目的索引？ (React-Native)

Question

我正在使用 native-base 中的 Accordion 从 objects 的数组中呈现我的常见问题解答列表。我无法在自定义渲染方法 _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 函数只有 2 个参数 item 和一个 expandable 布尔值

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>
        );
    }

如何获取 native-base 手风琴的 header 组件中每个项目的索引？ (React-Native)

How to get index of each item in header component of native-base accordion? (React-Native)

accordion

reactjs

react-native

native-base