如何创建 UI with arrow react native？

Question

我想创建一个UI如下图。

我该如何实施？任何人对此都有想法。请帮助我。谢谢

Answer 1

是的..你可以用位置设计那个箭头：'absolute' css 属性。尝试实现下面的代码！

     <View style={{ marginTop: 10, marginHorizontal: 15 }}>
      <View style={{ position: 'relative' }}>
        <View style={{ borderWidth: 1, padding: 5, backgroundColor: '#e5f8ff', borderColor: '#007299'  }}>
          <Text>Top Note</Text>
        </View>
        <View style={{ position: 'absolute', top: 9, left: -5 }}>
          <View style={{ borderBottomWidth: 1, borderLeftWidth: 1 ,backgroundColor: '#e5f8ff', borderColor: '#007299', width: 10, height: 10, transform: [{ rotate: '45deg'}] }}>

          </View>
        </View>
      </View>
    </View>

check this image

Answer 2

这是一个有效的 Demo

@pds 的回答也建议您需要将箭头组件设置为绝对箭头组件以将其定位在邮件正文上。

使用 CSS 三角形和绝对定位你可以获得工作演示。

Answer 3

这里有一些库可以帮助您实现整个 UI :

三角形：https://github.com/Jpoliachik/react-native-triangle

时间线列表视图：https://github.com/thegamenicorus/react-native-timeline-listview
时间轴主题：https://github.com/tomzaku/react-native-timeline-theme

如何创建 UI with arrow react native？

How can I create UI with arrow react native?

mobile

view

uiview

react-native