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？

3 个答案: