react native：有办法只在 native-base lib 的手风琴的 3 选项卡中定位图标吗？

Question

有办法从“react-native-vector-icons 目录 - MaterialIcons”中放置图标“eye” 我只需要将“眼睛”图标 放在手风琴的第 3 个位置 。这个手风琴来自“本地基础”库。

这是我想要实现的例子：

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”自定义 header 视图，但是如果您想在 header 的特定索引上添加自定义视图，则必须对其进行自定义有一点。

下面

是默认参数return

renderHeader(item, expanded)

您必须在库中编辑“src/basic/Accordion.js”class 并像下面那样更改它

renderHeader(item, expanded, index)

然后您将获得 Accordin 的 header 项的索引，然后您可以根据条件自定义它的视图，如 if index == 2（第 3 项）然后添加“眼睛”图标

react native：有办法只在 native-base lib 的手风琴的 3 选项卡中定位图标吗？

react native: there is way to position icon only in the 3 tab of the accordion from native-base lib?

javascript

reactjs

react-native

icons

native-base