React Native中的聊天气泡
Kam*_*ili 4 html css flexbox react-native
我目前正在使用react-native做一个聊天泡泡.由于我是反应原生的新手,我首先尝试在浏览器上创建聊天气泡,然后尝试在react-native中复制相同的内容.我正在努力在反应原生中复制箭头.有什么想法/建议吗？
普通的HTML/CSS:
<div>
<p class="to-me">Hey!</p>
</div>
div {
padding:20px;
justify-self: center;
align-self: center;
text-align: left;
display: flex;
flex-direction: column;
width: 450px;
}
div p {
font-size: 16px;
line-height: 1.4;
margin: 1px 0;
padding: 8px 17px 6px 13px;
max-width: 380px;
position: relative;
border-radius: 18px;
}
div p:after {
position: absolute;
content: "";
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
}
div p.to-me {
color: black;
align-self: flex-start;
background-color: #E5E5EA;
}
div p.to-me:after {
background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='15.515px' height='17.5px' viewBox='32.484 17.5 15.515 17.5' enable-background='new 32.484 17.5 15.515 17.5'><path fill='#E5E5EA' d='M38.484,17.5c0,8.75,1,13.5-6,17.5C51.484,35,52.484,17.5,38.484,17.5z'/></svg>") left bottom no-repeat;
left: -6px;
}
结果:
React-Native版本:
<View style={[styles.balloon, {backgroundColor: '#1084ff'}]}>
<Text style={{paddingTop: 5, color: 'white'}}>Hey!</Text>
<View
style={[
styles.arrowContainer,
styles.arrowLeftContainer,
]}
>
<View style={styles.arrowLeft} />
</View>
</View>
</View>
item: {
marginVertical: 14,
flexDirection: 'row'
},
itemIn: {
marginLeft: 10
},
itemOut: {
alignSelf: 'flex-end',
marginRight: 10
},
balloon: {
maxWidth: scale(250),
paddingHorizontal: 15,
paddingTop: 10,
paddingBottom: 15,
borderRadius: 20,
},
arrowContainer: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1
// backgroundColor: 'red'
},
arrowLeftContainer: {
justifyContent: 'center',
alignItems: 'flex-start',
// backgroundColor: 'green'
},
arrowLeft: {
left: -20,
}
结果:
我几乎复制了泡沫.只是在箭头部分挣扎.有什么想法/建议吗？
Kam*_*ili 12
使箭头显示比我想象的更难,特别是当你考虑不同的屏幕尺寸,不同的平台(iOS和Android).是的,@ Panagiotis Vrs是正确的,当他提到在两个平台上看起来不会100%相同.尽管如此,我还是尝试使用react-native-svg和react-native-size- matter来实现相同的目标.
我正在分享我的代码,也许有人可以即兴创作并使其更好.
HTML部分
<View style={[styles.item, styles.itemIn]}>
<View style={[styles.balloon, {backgroundColor: 'grey'}]}>
<Text style={{paddingTop: 5, color: 'white'}}>Hey! How are you?</Text>
<View
style={[
styles.arrowContainer,
styles.arrowLeftContainer,
]}
>
<Svg style={styles.arrowLeft} width={moderateScale(15.5, 0.6)} height={moderateScale(17.5, 0.6)} viewBox="32.484 17.5 15.515 17.5" enable-background="new 32.485 17.5 15.515 17.5">
<Path
d="M38.484,17.5c0,8.75,1,13.5-6,17.5C51.484,35,52.484,17.5,38.484,17.5z"
fill="grey"
x="0"
y="0"
/>
</Svg>
</View>
</View>
</View>
<View style={[styles.item, styles.itemOut]}>
<View style={[styles.balloon, {backgroundColor: '#1084ff'}]}>
<Text style={{paddingTop: 5, color: 'white'}}>Hey! I am good. How are you?</Text>
<View
style={[
styles.arrowContainer,
styles.arrowRightContainer,
]}
>
<Svg style={styles.arrowRight} width={moderateScale(15.5, 0.6)} height={moderateScale(17.5, 0.6)} viewBox="32.485 17.5 15.515 17.5" enable-background="new 32.485 17.5 15.515 17.5">
<Path
d="M48,35c-7-4-6-8.75-6-17.5C28,17.5,29,35,48,35z"
fill="#1084ff"
x="0"
y="0"
/>
</Svg>
</View>
</View>
</View>
<View style={[styles.item, styles.itemOut]}>
<View style={[styles.balloon, {backgroundColor: '#1084ff'}]}>
<Text style={{paddingTop: 5, color: 'white'}}>Check this Image out !!!</Text>
<View
style={[
styles.arrowContainer,
styles.arrowRightContainer,
]}
>
<Svg style={styles.arrowRight} width={moderateScale(15.5, 0.6)} height={moderateScale(17.5, 0.6)} viewBox="32.485 17.5 15.515 17.5" enable-background="new 32.485 17.5 15.515 17.5">
<Path
d="M48,35c-7-4-6-8.75-6-17.5C28,17.5,29,35,48,35z"
fill="#1084ff"
x="0"
y="0"
/>
</Svg>
</View>
</View>
</View>
<View style={[styles.item, styles.itemOut]}>
<View style={[styles.balloon, {backgroundColor: '#1084ff'}]}>
<Image
styleName="small"
borderRadius={5}
source={{ uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
/>
<View
style={[
styles.arrowContainer,
styles.arrowRightContainer,
]}
>
<Svg style={styles.arrowRight} width={moderateScale(15.5, 0.6)} height={moderateScale(17.5, 0.6)} viewBox="32.485 17.5 15.515 17.5" enable-background="new 32.485 17.5 15.515 17.5">
<Path
d="M48,35c-7-4-6-8.75-6-17.5C28,17.5,29,35,48,35z"
fill="#1084ff"
x="0"
y="0"
/>
</Svg>
</View>
</View>
</View>
<View style={[styles.item, styles.itemIn]}>
<View style={[styles.balloon, {backgroundColor: 'grey'}]}>
<Text style={{paddingTop: 5, color: 'white'}}>Nice Picture</Text>
<View
style={[
styles.arrowContainer,
styles.arrowLeftContainer,
]}
>
<Svg style={styles.arrowLeft} width={moderateScale(15.5, 0.6)} height={moderateScale(17.5, 0.6)} viewBox="32.484 17.5 15.515 17.5" enable-background="new 32.485 17.5 15.515 17.5">
<Path
d="M38.484,17.5c0,8.75,1,13.5-6,17.5C51.484,35,52.484,17.5,38.484,17.5z"
fill="grey"
x="0"
y="0"
/>
</Svg>
</View>
</View>
</View>
CSS部分
item: {
marginVertical: moderateScale(7, 2),
flexDirection: 'row'
},
itemIn: {
marginLeft: 20
},
itemOut: {
alignSelf: 'flex-end',
marginRight: 20
},
balloon: {
maxWidth: moderateScale(250, 2),
paddingHorizontal: moderateScale(10, 2),
paddingTop: moderateScale(5, 2),
paddingBottom: moderateScale(7, 2),
borderRadius: 20,
},
arrowContainer: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1,
flex: 1
},
arrowLeftContainer: {
justifyContent: 'flex-end',
alignItems: 'flex-start'
},
arrowRightContainer: {
justifyContent: 'flex-end',
alignItems: 'flex-end',
},
arrowLeft: {
left: moderateScale(-6, 0.5),
},
arrowRight: {
right:moderateScale(-6, 0.5),
}
现在在不同的设备屏幕上缩放它对我来说只是反复试验.现在的输出对我来说已经足够了.也许当我有时间时,我会尝试改进当前的设计.
这是它在iOS上的外观:
iPhone 7:
iPhone X:
现在在Android上不幸的是我无法使箭头的曲线出现.也许我做错了什么.这就是它最终的样子.
像素2:
Nexus 6:
也许我们可以flex用来使箭头曲线在android上看起来很好.
万一有人做了更好的版本.分享.:)
| 归档时间： |
|
| 查看次数： |
5646 次 |
| 最近记录： |