javascript - 如何将图标放置在文本的右侧
问题描述
我尝试了很多方法,但不幸的是它仍然不起作用,请帮助我!
我已经尝试反转文本和图标,但仍然无法正常工作
这是课程
export class More extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.list}>
<View style={styles.hairline}>
<Text style={styles.text}>
<Text>أضف إعلانك</Text>
<Icon name="ios-add" size={20}/>
</Text>
</View>
<View style={styles.hairline}>
<Text style={styles.text}><Icon name="ios-heart" size={20}/> إعلانات المفضلة</Text>
</View>
</View>
</View>
);
}
}
这是样式表
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
},
list: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'flext-start',
},
text: {
padding: 10,
textAlign: 'right',
alignSelf: 'stretch',
},
icon: {
flexDirection: 'row',
alignItems: 'flex-end'
},
hairline: {
borderBottomColor: '#A2A2A2',
borderBottomWidth: 1,
},
});
我希望图标显示在文本的右侧而不是左侧。
解决方案
尝试这个:
const TextWithIcon = ({ text, iconName }) => (
<View
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}
>
<View style={{ marginRight: 8 }}>
<Text>{text}</Text>
</View>
<Icon name={iconName} size={20} />
</View>
);
推荐阅读
- css - 当容器包含绝对定位的内容时,如何使容器仅在 x 轴上溢出?
- python - ipython 或 pycharm 下划线数字文字中的千位分隔符
- python - 从分组中查找平均值并显示所有信息
- android - Web3j-Cli 不会为视图 solc 方法生成正确的 java 方法
- node.js - 我尝试登录时身份验证失败,但注册似乎很好
- python - 使用 Gstreamer 和 OpenCV (Python) 进行 RTSP 流式传输
- reactjs - 在构造函数中将状态属性设置为未定义是最佳实践吗?
- mysql - ER_WRONG_VALUE_COUNT_ON_ROW
- c++ - 如何使用“派生输入类”创建派生类?
- oracle - 在 CSV、Excel、PDF 中生成并上传关于 get 请求结果的报告到 apex oracle