0
156
VistasCentrar elemento horizontalmente en React Native
Quiero centrar un botón horizontalmente, este es mi código:
return ( <View style={styles.root}> <View style={styles.container}> <SafeAreaView style={HEADER}> <SliderBox style={{ height: '100%' }} currentImageEmitter={index => setCurrentSliderNumber(index)} images={data.images}> </SliderBox> </SafeAreaView> {currentSliderNumber == data.images.length - 1 ? <View style={styles.item}> <Button style={styles.getStartedButton} appearance="ghost" status="control" onPress={onGetStartedPressed} > Get Started </Button> </View> : null} </View> </View> )y este es mi estilo:
const styles = StyleSheet.create({ forgotPasswordButton: { paddingHorizontal: 0, }, root: { flex: 1, height: '100%', backgroundColor: '#fff' }, container: { borderColor: 'rgba(0,0,0,0.2)', }, getStartedButton: { marginVertical: 12, backgroundColor: 'red' }, item: { borderColor: 'rgba(0,0,0,0.2)', position: 'absolute', top: '80%', left: '50%' }, text: { position: 'absolute', top: '30%', left: '10%' } }) También traté de agregar alingnItems:center to root :
root: { flex: 1, height: '100%', backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }Pero el resultado no es el esperado:
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Intente cambiar el objeto de estilo del elemento a esto:
item: { borderColor: 'rgba(0,0,0,0.2)', position: 'absolute', top: '80%', left:0, width:"100%", alignItems:"center", justifyContent:"center" },
·
Juan Pablo Isaza
Denunciar
0
No use la posición hasta que sea necesario, debe usar las propiedades flexibles.
return ( <View style={styles.root}> <View style={styles.container}> <SafeAreaView style={HEADER}> <SliderBox style={{ height: '100%' }} currentImageEmitter={index => setCurrentSliderNumber(index)} images={data.images}> </SliderBox> </SafeAreaView> {currentSliderNumber == data.images.length - 1 ? <View style={styles.item}> <Button style={styles.getStartedButton} appearance="ghost" status="control" onPress={onGetStartedPressed} > Get Started </Button> </View> : null} </View> </View> )Estilos
const styles = StyleSheet.create({ forgotPasswordButton: { paddingHorizontal: 0, }, root: { flex: 1, height: '100%', backgroundColor: '#fff' }, container: { borderColor: 'rgba(0,0,0,0.2)', flexGrow:1, justifyContent: "space-between" }, getStartedButton: { marginVertical: 12, backgroundColor: 'red', alignSelf:"center", flexGrow:2, }, item: { borderColor: 'rgba(0,0,0,0.2)', flexGrow:1, justifyContent:"center", alignItem:"center", }, text: { } })Echa un vistazo a los documentos de diseño
·
Juan Pablo Isaza
Denunciar
Responde la pregunta