Question

我无法对齐Touchable组件的内部标签这是我的代码：

render(){
return(
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<TouchablewithoutFeedback onPress={()=> this.incrementCount()}>
<Text style={{alignslef: 'center'>
Count 
</Text>
</TouchablewithoutFeedback>
);}

Answer 1

您可以在TouchableWithoutFeedback的样式中添加alignItems: ‘center’的{{1}}样式道具，或使用textAlign代替alignSelf

Answer 2

这是我先前查询的答案。

render(){
return(
<TouchablewithoutFeedback>
<Text style={{**textAlign:'center'**}}>click here</Text>
</TouchablewithoutFeedback>
);
}

但是，我发现了一种正确设置按钮样式的完整方法，因为前一个答案不能完全恢复我的样式，文本成功地水平对齐了中心，但垂直对齐了。

所以这是完整的答案：

render(){
return(
<TouchablewithoutFeedback style={styles.btn}>
<Text style={styles.btnText}>
Click me
<Text>
</TouchablewithoutFeedback>
);
}
const styles = StyleSheet.create({
btn:{
width: 200,
height: 200,
justifyContent: 'center',
alignItems: 'center'
},
btnText:{
fontSize: 25,
color: 'red'
}
})

在React Native中对齐Touchable组件的内部标签

2 个答案: