Je veux que l'image colle au bas de l'application. Comment puis-je le faire ? J'ai essayé différentes solutions de débordement de pile mais je n'arrive toujours pas à obtenir le résultat. Comme vous pouvez le voir, il y a un grand espace blanc entre la bordure rouge et l'image. L'image est rognée et il ne devrait pas y avoir d'espace supplémentaire en dessous. Merci d'avance !

 const TubeBoard = () =>
  (
    <View style={styles.container}>
      <Image
        source={bigTube}
        style={styles.imageStyle}
        resizeMode="contain"
      />
    </View>
  );

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-end',
    width: deviceWidth,
    height: deviceHeight,
  },
  imageStyle: {
    borderColor: 'red',
    borderWidth: 10,
    position: 'absolute',
    bottom: 0,
    width: '100%',
  },
});

capture d'écran ici

Résolu : obtenez le résultat souhaité en ajoutant {flex: 1} au conteneur et la hauteur à l'image.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    borderColor: 'blue',
    borderWidth: 10,
  },
  imageStyle: {
    borderColor: 'red',
    borderWidth: 10,
    position: 'absolute',
    bottom: 0,
    width: deviceWidth,
    height: deviceHeight * 0.75,
  },
});

résultat désiré

0
Chris Choy 23 mai 2018 à 13:24

3 réponses

Meilleure réponse

Obtenez le résultat souhaité en ajoutant {flex: 1} au conteneur et la hauteur à l'image.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    borderColor: 'blue',
    borderWidth: 10,
  },
  imageStyle: {
    borderColor: 'red',
    borderWidth: 10,
    position: 'absolute',
    bottom: 0,
    width: deviceWidth,
    height: deviceHeight * 0.75,
  },
});
0
Chris Choy 24 mai 2018 à 10:34

Je pense que la vue de votre conteneur ne remplit pas tout l'écran. Essayez d'ajouter flex:1 à votre style de conteneur.

0
Miro Cosic 23 mai 2018 à 21:28
const styles = StyleSheet.create({
  container: {
    ...
  },
  imageStyle: {
    borderColor: 'red',
    borderWidth: 10,
    width: deviceWidth,
    height: 100
  },
});
0
Bin Feng 24 mai 2018 à 00:31