React Native 左对齐图标,文本居中
React Native align icon left and text centered
我是 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;
出于视觉目的:
Snack满足您的测试需求!
PS: 已尝试 但无济于事。
这是您的解决方案。更新以下样式:
对于图标:
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%'
}
您可以在代码中更新这两种样式并进行检查。
我是 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;
出于视觉目的:
Snack满足您的测试需求!
PS: 已尝试
这是您的解决方案。更新以下样式:
对于图标:
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%'
}
您可以在代码中更新这两种样式并进行检查。