Совместите внутренние теги Touchable компонента в React Native

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

Это ответ на мой запрос ранее.

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'
}
})

Answer 2

Вы можете включить опору стиля для TouchableWithoutFeedback, то есть alignItems: ‘center’, или использовать textAlign вместо alignSelf внутри Text стилей