手风琴中的对齐箭头本机反应

Question

我正在使用 https://github.com/dooboolab/dooboo-ui-native/tree/master/src/components/shared/Accordion 库为 FAQ 制作手风琴。我正在尝试设置右侧箭头的样式。我希望它与 header 对齐在相同的高度上。有任何想法吗？或者，也许您会为此功能推荐不同的库？

  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>

Answer 1

那么有两个解决方案 1.要么你可以使用样式来设置箭头。它将是这样的：

position: 'absolute', top: 0, right: 0

或者您也应该在 header 中添加包含 ARROW 的视图。在这种情况下，您将需要一个 parent VIEW 并将 flexdirection 设置为行，然后是两个 child VIEW，一个用于 header 文本，另一个用于箭头。

希望对你有所帮助。

手风琴中的对齐箭头本机反应

Aligning arrow in accordion react native

styling

react-native