【发布时间】：2018-11-01 02:10:03
【问题描述】：
我目前正在 react-native 中制作聊天气泡。由于我是 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,
}
我几乎复制了泡沫。只是在箭头部分挣扎。有什么想法/建议吗？
【问题讨论】：
-
我很确定这是不可行的 atm 或者这将是一个很大的痛苦...原因是 android 和 ios 在溢出等方面的行为不同。也许这个组件会帮助你@ 987654323@ 但即使你让它不能 100% 相同。我建议不要带箭头
-
是的，你是对的。它看起来不一样。检查我的答案:)
标签： html css react-native flexbox