css - end - Haz que un objeto se pegue al fondo usando flex en reaccionar-native

flex-wrap

Question

Supongamos que este es el diseño:

<View style={styles.container}>
    <View style={styles.titleWrapper}>
        ...
        ...
    </View>
    <View style={styles.inputWrapper}>
        ...
        ...
    </View>

    <View style={styles.footer}>
        <TouchableOpacity>
            <View style={styles.nextBtn}>
                <Text style={styles.nextBtnText}>Next</Text>
            </View>
        </TouchableOpacity>
    </View>
</View>

Quiero hacer que la vista con los estilos del pie de página se ubique en la parte inferior de la pantalla. Traté de dar la propiedad alignSelf al pie de página, pero en lugar de colocarlo en la parte inferior, lo coloca en el lado derecho de la pantalla. ¿Cómo puedo hacer que el elemento del pie de página se adhiera al final? Gracias.

Answer 1

En React Native, el valor predeterminado de flexDirection es la column (a diferencia de CSS, donde es una row ).

Por lo tanto, en flexDirection: ''column'' el eje transversal es horizontal y el alignSelf funciona a la izquierda / derecha.

Para fijar el pie de página en la parte inferior, hay varias opciones. Aquí hay uno:

• aplicar justifyContent: ''space-between'' al contenedor

Answer 2

La posición absoluta es otra forma de arreglar el pie de página, al igual que:

footer: {
    position: ''absolute'',
    height: 40,
    left: 0, 
    top: WINDOW_HEIGHT - 40, 
    width: WINDOW_WIDTH,
 }

Answer 3

Utilizaría el siguiente enfoque:

<View style={styles.container}>

    <View style={styles.contentContainer}> {/* <- Add this */}

        <View style={styles.titleWrapper}>
            ...
        </View>
        <View style={styles.inputWrapper}>
            ...
        </View>

    </View>

    <View style={styles.footer}>
        ...
    </View>
</View>

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ''#F5FCFF'',
    },
    titleWrapper: {

    },
    inputWrapper: {

    },
    contentContainer: {
        flex: 1 // pushes the footer to the end of the screen
    },
    footer: {
        height: 100
    }
});

De esta forma, los estilos de titleWrapper y de inputWrapper se pueden actualizar sin romper el diseño de su aplicación y los componentes en sí mismos son más fáciles de reutilizar :)