Свойство renderHeader NativeBase accordion, показывающее неопределенное значение для параметра "extended" - PullRequest
Новая
       11

Свойство renderHeader NativeBase accordion, показывающее неопределенное значение для параметра "extended"

0 голосов
/ 27 сентября 2018

Я использую аккордеон на родной основе в одном из моих реактивных проектов.Мне нужно настроить его заголовок, и для этого я просмотрел его документацию.Метод, упомянутый в документе, не работает должным образом.Параметр expanded функции _renderHeader(title, expanded) показывает неопределенное значение, когда я проверял его значение в предупреждении.Это должно дать мне true или false Ниже приведен код, приведенный в документации по нативной базе.Кто-нибудь может подсказать мне, как это даст мне true или false на основе открытого и закрытого аккордеона?

import React, { Component } from "react";
import { Container, Header, Content, Accordion, View, Text } 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 AccordionCustomHeaderContentExample extends Component {
  _renderHeader(title, expanded) {
    return (
      <View
        style={{ flexDirection: "row", padding: 10, justifyContent: "space-between", alignItems: "center", backgroundColor: "#A9DAD6" }}
      >
        <Text style={{ fontWeight: "600" }}>
          {" "}{title}
        </Text>
        {expanded
          ? <Icon style={{ fontSize: 18 }} name="remove-circle" />
          : <Icon style={{ fontSize: 18 }} name="add-circle" />}
      </View>
    );
  }
  _renderContent(content) {
    return (
      <Text
        style={{ backgroundColor: "#e3f1f1", padding: 10, fontStyle: "italic" }}
      >
        {content}
      </Text>
    );
  }
  render() {
    return (
      <Container>
        <Header />
        <Content padder>
          <Accordion
            dataArray={dataArray}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
          />
        </Content>
      </Container>
    );
  }
}

Ответы [ 2 ]

0 голосов
/ 05 января 2019 
_renderHeader({title, expanded}) {
    return (
      <View
        style={{ flexDirection: "row", padding: 10, justifyContent: "space-between", alignItems: "center", backgroundColor: "#A9DAD6" }}
      >
        <Text style={{ fontWeight: "bold", fontSize:20 }}>
          {" "}{title}
        </Text>
        {expanded
          ? <Icon style={{ fontSize: 18 }} name="remove-circle" />
          : <Icon style={{ fontSize: 18 }} name="add-circle" />}
      </View>
    );
  }
  _renderContent({content}) {
    return (
      <Text
        style={{ backgroundColor: "#e3f1f1", padding: 10, fontStyle: "italic" }}
      >
        {content}
      </Text>
    );
  }
0 голосов
/ 27 сентября 2018

Эта проблема связана с аккордеонным интерфейсом с синтаксической разницей в параметрах (т.е. в их коде отсутствовал расширенный параметр).Родная базовая команда решила эту проблему несколько дней назад.Следовательно, вам нужно удалить папку node_modules, а затем установить плагин с помощью следующих команд: 

npm install native-base --save
react-native link

Я думаю, это может быть причиной проблемы, с которой вы столкнулись, пожалуйста, найдите 'Старый код renderHeader: 

renderHeader?: (item: any) => React.ReactElement<any>;

Они изменили код renderHeader следующим образом, добавив расширенный параметр: 

renderHeader?: (item: any, expanded: boolean) => React.ReactElement<any>;

Подробнеепо этой ссылке https://github.com/GeekyAnts/NativeBase/issues/2160

Надеюсь, это поможет вам.

...