Выравнивание стрелы в баяне отреагирует родным - PullRequest
Новая
       20

Выравнивание стрелы в баяне отреагирует родным

0 голосов
/ 28 февраля 2020

Я использую библиотеку https://github.com/dooboolab/dooboo-ui-native/tree/master/src/components/shared/Accordion, чтобы делать аккордеон для FAQ. Я пытаюсь стилизовать стрелку справа. Я хочу, чтобы он был выровнен на той же высоте, что и заголовок. Любые идеи? Или, может быть, вы рекомендуете разные библиотеки для этой функции? 

  export default styles = {
  accordion: {
    flex: 1
  },
  question: {
    fontSize: 16,
    textAlign: 'center'
  },
  questionView: {
    marginLeft: 20,
    marginRight: 20
  },
  answer: {
    fontSize: 16,
    textAlign: 'justify'
  },
  answerView: {
    marginLeft: 10,
    marginRight: 10
  },
  icon: {
    justifyContent: 'flex-start',
    alignItems: 'flex-end'
  }
};

И Аккордеон: 

 return (
        <Accordion
          key={item.id}
          style={styles.accordion}
          contentVisible={false}
          visibleElement={
            <View style={styles.icon}>
              <Icon size={12} name="arrow-up" style={styles.icon} />
            </View>
          }
          invisibleElement={
            <View style={styles.icon}>
              <Icon size={12} name="arrow-down" />
            </View>
          }
          header={
            <View>
              <Text style={styles.question}>{item.item.question}</Text>
            </View>
          }
        >
          <View style={styles.answerView}>
            <Text style={styles.answer}>{item.item.answer}</Text>
          </View>
        </Accordion>

enter image description here

1 Ответ

0 голосов
/ 28 февраля 2020

Ну, есть два решения 1. Либо вы можете использовать стиль, чтобы установить стрелку. Это будет выглядеть так:

позиция: «абсолютная», верхняя: 0, правая: 0

Или вы должны добавить представление, которое также содержит СТРЕЛКУ в заголовке. В этом случае вам потребуется родительский VIEW с указанием flexdirection для строки, а затем два дочерних VIEW, один для текста заголовка, а другой для Arrow.

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

...