web-dev-qa-db-fra.com

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

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 la positionne à droite de l'écran. Comment puis-je faire en sorte que le pied de page reste jusqu'au bout? Je vous remercie.

csscss3react-nativeflexboxreact-native-flexbox
42
Karl

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

Par conséquent, dans flexDirection: 'column' l'axe transversal est horizontal et alignSelf fonctionne à gauche/à droite.

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

25
Michael_B

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

42
David

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,
 }
9
CoderLim

Pour ce faire, vous pouvez utiliser la position de l'élément Stylesheet: 'absolute'.

/*This is an Example to Align a View at the Bottom of Screen in React Native */
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default class App extends Component {
  render() {
    return (
      <View style={styles.containerMain}>
        <Text> Main Content Here</Text>
        <View style={styles.bottomView}>
          <Text style={styles.textStyle}>Bottom View</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  containerMain: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  bottomView: {
    width: '100%',
    height: 50,
    backgroundColor: '#EE5407',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute', //Here is the trick
    bottom: 0, //Here is the trick
  },
  textStyle: {
    color: '#fff',
    fontSize: 18,
  },
});

enter image description here

5
snehal agrawal

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

Dans react native, il existe des propriétés comme position: 'absolute', bottom: 0, que vous voulez donner à votre vue de bouton

0
ravi