alignItems:基线在安卓上不起作用
alignItems:基线在安卓上不起作用
提问于 2018-07-12 04:44:38
我正在尝试一个短语，它有不同的字体大小都在底部对齐，因此，我做了以下工作：
<View style={styles.header}>
<TextCustomized style={styles.balance} text="você tem" />
<TextCustomized style={styles.number} text=" R$" />
<TextCustomized style={styles.integer} text="100" />
<TextCustomized style={styles.number} text=",00" />
<TextCustomized style={styles.balance} text=" de saldo" />
</View>
const styles = StyleSheet.create({
header: {
flexDirection: 'row',
alignItems: 'baseline',
justifyContent: 'center',
paddingTop: 10,
borderBottomWidth: 1,
borderBottomColor: '#e1e1e1',
paddingBottom: 10,
},
balance: {
fontSize: 14
},
number: {
fontSize: 18,
color: '#0778e4',
fontWeight: 'bold',
},
integer: {
fontSize: 30,
color: '#0778e4',
fontWeight: "800",
lineHeight: 30,
},
})它在iOS上运行良好，但在安卓上却不能正常工作，正如你在PS上所看到的那样。
我怎样才能做到这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-12 05:43:51
作为一种解决办法，您可以将要对齐基线的文本包装到Text元素中。此时，父对象中的alignItems: baseline将不再是必要的。像这样的东西应该是有效的：
<View style={styles.header}>
<Text>
<TextCustomized style={styles.balance} text="você tem" />
<TextCustomized style={styles.number} text=" R$" />
<TextCustomized style={styles.integer} text="100" />
<TextCustomized style={styles.number} text=",00" />
<TextCustomized style={styles.balance} text=" de saldo" />
</Text>
</View>
const styles = StyleSheet.create({
header: {
flexDirection: 'row',
justifyContent: 'center',
paddingTop: 10,
borderBottomWidth: 1,
borderBottomColor: '#e1e1e1',
paddingBottom: 10,
},
balance: {
fontSize: 14
},
number: {
fontSize: 18,
color: '#0778e4',
fontWeight: 'bold',
},
integer: {
fontSize: 30,
color: '#0778e4',
fontWeight: "800",
lineHeight: 30,
}
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51293914
复制相关文章
相似问题