Faire un article coller au bas en utilisant flex dans réag-native

Question

Supposons que ceci soit la mise en page:

 <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>
 

Je souhaite que la vue avec les styles de pied de page se positionne en bas de l'écran. J'ai essayé de donner la propriété alignSelf au pied de page, mais au lieu de la positionner en bas, elle se positionne du côté droit de l'écran. Comment puis-je faire en sorte que le pied de page reste jusqu'au bout? Je vous remercie.

Answer 1

J'utiliserais l'approche suivante:

 <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 cette façon, les styles de titleWrapper et inputWrapper peuvent être mis à jour sans altérer la présentation de votre application et les composants eux-mêmes sont plus faciles à réutiliser :)

Answer 2

Dans React Native, la valeur par défaut de flexDirection est column (contrairement à CSS, où il s'agit de row ).

Ainsi, en flexDirection: 'column' l'axe transversal est horizontal et alignSelf fonctionne à gauche / à droite.

Pour épingler votre pied de page au bas, appliquez justifyContent: 'space-between' au conteneur

Answer 3

Absolument la position est un autre moyen de réparer le pied de page, tout comme:

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

Answer 4

incorporer d'autres contenus dans un scrollview

 <View style={styles.container}>

  <ScrollView> {/* <- Add this */}
        <View style={styles.titleWrapper}>
            ...
        </View>
        <View style={styles.inputWrapper}>
            ...
        </View>
    </ScrollView>

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