反應原生：有沒有辦法只在原生庫的手風琴的 3 選項卡中定位圖標？

Question

有一種方法可以從“react-native-vector-icons 目錄 - MaterialIcons”中放置圖標“eye”，我只需要將“eye”圖標放在手風琴的第 3 個位置。 這個手風琴來自“native-base”庫。

這是我想要實現的示例：

import React, { Component } from "react";
import { Container, Header, Content, Accordion } 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 AccordionHeaderContentStyleExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content padder>
          <Accordion
            dataArray={dataArray}
            headerStyle={{ backgroundColor: "#b7daf8" }}
            contentStyle={{ backgroundColor: "#ddecf8" }}
          />
        </Content>
      </Container>
    );
  }
}

Answer 1

這是一個工作示例。

https://snack.expo.io/9dGIGdAsg

import React, { Component } from "react";
import { Container, Header, Content, Icon, Accordion, Text, View } 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", icon: "visibilty" }
];

export default class AccordionCustomHeaderContent extends Component {
  _renderHeader(item, expanded) {
    return (
      <View style={{
        flexDirection: "row",
        padding: 10,
        justifyContent: "space-between",
        alignItems: "center" ,
        backgroundColor: "#A9DAD6" }}>
      <Text style={{ fontWeight: "600" }}>
          {" "}{item.title}
        </Text>
        {item.icon && (<Icon style={{ fontSize: 18 }} name="remove-circle" />)}
      </View>
    );
  }
  _renderContent(item) {
    return (
      <Text
        style={{
          backgroundColor: "#e3f1f1",
          padding: 10,
          fontStyle: "italic",
        }}
      >
        {item.content}
      </Text>
    );
  }
  render() {
    return (
      <Container>
        <Header />
        <Content padder style={{ backgroundColor: "white" }}>
          <Accordion
            dataArray={dataArray}
            animation={true}
            expanded={true}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
          />
        </Content>
      </Container>
    );
  }
}
<br/>

Answer 2

您可以通過在其中傳遞視圖來使用其功能“renderHeader”自定義標題視圖，但是如果您想在標題的特定索引上添加自定義視圖，那么您必須稍微自定義它。

這是默認參數返回以下

renderHeader(item, expanded)

您必須編輯庫中的“src/basic/Accordion.js”類並像下面這樣更改它

renderHeader(item, expanded, index)

然后您將獲得 Accordin 標題項的索引，然后您可以按條件自定義它的視圖，例如 if index == 2 (item 3) 然后添加“眼睛”圖標