タイトル通り、React Native でシンプルな吹き出しを作成する方法についてです。
作成した吹き出しは下記のような見た目です。
開発中のプロジェクトの、地図上に表示する吹き出しを作成しました。
縁がグレーで、下向きのシンプルな吹き出しです。
なお、吹き出し内のコンテンツは念のため削除してありますが…大した内容ではないので、そのままでもよかったかな？
参考にさせていただいた記事はこちらから。
React Nativeでライブラリを使わずに枠線だけの吹き出しを作る – Qiita
https://qiita.com/mogamin3/items/e2a245d225b25dd74f04
本当に…実装したい吹き出しのイメージにドンピシャでした…！本当にありがとうございます！
なお、こちらの記事では、上向きの吹き出しのサンプルコードが記載されています。
実装したコードは下記のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | import { StyleSheet, View } from 'react-native';const BALLOON_TRIANGLE_HEIGHT = 14;const styles = StyleSheet.create({ container: { backgroundColor: '#FFF', width: 230, borderWidth: 0.5, borderColor: '#ccc', borderRadius: 10, }, buttons: { flexDirection: 'row', }, buttonContainer: { margin: 5, }, buttonStyle: { backgroundColor: '#FFF', width: 90, }, buttonTitle: { color: '#000', fontSize: 13, }, balloonTriangleBase: { width: 0, height: 0, position: 'absolute', top: '100%', borderBottomColor: 'transparent', borderLeftColor: 'transparent', borderRightColor: 'transparent' }, balloonTriangleOuter: { left: 100, borderWidth: BALLOON_TRIANGLE_HEIGHT, borderTopColor: '#ccc', }, balloonTriangleInner: { left: 101, borderWidth: BALLOON_TRIANGLE_HEIGHT - 1, // border分だけ引く borderTopColor: '#FFF', }, bubbleContent: { alignItems: 'center', padding: 10, }, label: { paddingVertical: 5, },});<View style={{ justifyContent: 'center', paddingBottom: BALLOON_TRIANGLE_HEIGHT + 3, width: 231, borderWidth: 0.5, borderColor: 'rgba(0,0,0,0)' }}> <View style={styles.container}> <View style={styles.bubbleContent}> ...... </View> <View style={{...styles.balloonTriangleBase, ...styles.balloonTriangleOuter}} /> <View style={{...styles.balloonTriangleBase, ...styles.balloonTriangleInner}} /> </View></View> |
今回は吹き出し内に表示するコンテンツの内容が固定だったので、横幅や吹き出しの三角形の位置などは具体的な値で指定しています。
もし吹き出し内の要素が固定では無かったり、吹き出しのサイズを内容によって変えたい場合は都度調整してください。
吹き出しの三角形の位置は、恐らく transform を使えば大丈夫のはず…？
試してないので何とも言えませんが…CSS の場合はそうなので、恐らく React Native でも上手くいくと思います。
以上、React Native でシンプルな吹き出しを作成する方法についてでした。
ご参考になれば幸いです。
