gpt4 book ai didi

android - React Native 左对齐图标,文本居中

转载 作者:行者123 更新时间:2023-11-29 16:41:35 24 4
gpt4 key购买 nike

我是 React Native 的新手,我正在尝试做一些非常简单的事情:

我想创建以下组件:

一个 TouchableHighlight,图像与 Touchable 的左侧对齐,文本居中。

我已经尝试了很多选项,例如向文本添加填充或边距,但这只会使按钮更大,而且似乎不是最干净的方法。

这是我到目前为止所得到的:

class App extends React.Component {
constructor(props) {
super(props);
}

render() {
return (
<View style={styles.appContainer}>
<TouchableHighlight onPress={() => {}} style={styles.button}>
<View style={styles.btnContainer}>
<Image source={require('./assets/ic_logout.png')} style={styles.icon} />
<Text style={styles.btnText}>Log out</Text>
</View>
</TouchableHighlight>
</View>
)
}
}

const styles = StyleSheet.create({
appContainer: {
flex: 1,
backgroundColor: 'lightgreen',
alignItems: 'center',
justifyContent: 'center'
},
btnContainer: {
backgroundColor: '#1d2aba',
paddingHorizontal: 60,
paddingVertical: 10,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 5
},
button: {
borderRadius: 5
},
icon: {
transform: [{ rotate: '180deg'}],
width: 25,
height: 25
},
btnText: {
textAlign: 'center',
fontWeight: 'bold',
fontSize: 16,
color: 'white'
}
});

export default App;


出于视觉目的:

React Native

这是 Snack 满足您的测试需求!
PS:已经试过了this但无济于事。

最佳答案

这是您的解决方案。更新以下样式:

对于图标:

icon: {
transform: [{ rotate: '180deg'}],
width: 25,
height: 25,
position: 'absolute',
left: 2, // Keep some space between your left border and Image
},

对于文本:

 btnText: {
textAlign: 'center',
fontWeight: 'bold',
fontSize: 16,
color: 'white',
height:'100%',
width:'100%'
}

您可以在代码中更新这两种样式并进行检查。

关于android - React Native 左对齐图标,文本居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50459580/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com