web-dev-qa-db-fra.com

React-native: comment définir l'image en arrière-plan de la mise en page (Afficher)

En ce moment, je définis l'image d'arrière-plan avec le code ci-dessous, où je crée une vue d'image supplémentaire pour définir l'image sur la vue et son bon fonctionnement.

<View>
<Image 
  style={{
     height:67 ,
     width: width} 
  source={Images.header_bachkground}/>
</View>

Maintenant, ma question est: Y a-t-il un moyen de définir l'image d'arrière-plan directement sur la vue comme:

<View 
  style={{
     height:67 ,
     width: width} 
  source={Images.header_bachkground}>
</View>

Le code ci-dessus ne fonctionne pas pour moi.

reactjslayoutreact-nativebackground-image
8
Mohd Shahzad

En utilisant <Image /> en tant que composant parent pour imbriquer des enfants est obsolète et générera bientôt une erreur (au moment d'écrire ceci). Utilisation <ImageBackground /> au lieu. Vous pouvez imbriquer n'importe quoi dans ImageBackground. Tous les accessoires que vous pouvez transmettre à <Image /> peut être passé à ceci.

Reportez-vous this .

8
Harshana Abeyaratne

Il existe deux approches pour cela. L'une consiste à tout mettre entre l'ouverture et la fermeture <Image> Mots clés. L'autre utilise les propriétés de mise en page. Reportez-vous à ce lien: https://medium.com/reactnative/background-images-in-react-native-191f3ed95a45

La première consiste à utiliser <Image> comme conteneur. Placez votre contenu entre <Image> et </Image>. Assurez-vous de définir le contenu du backgroundColor: 'transparent'. Je pense que Android le donne par défaut mais pas l'iPhone. Donc, pour des raisons de cohérence, nous devons le déclarer explicitement. React Native vous avertit de le faire) de cette façon. Ce sera bientôt une erreur. Donc, je recommande cette dernière façon.

const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png';

export default class BackgroundImage extends Component {
  render() {
    const resizeMode = 'center';
    const text = 'This is some text inlaid in an <Image />';

    return (
      <Image
        style={{
          backgroundColor: '#ccc',
          flex: 1,
          resizeMode,
          position: 'absolute',
          width: '100%',
          height: '100%',
          justifyContent: 'center',
        }}
        source={{ uri: remote }}
      >
        <Text
          style={{
            backgroundColor: 'transparent',
            textAlign: 'center',
            fontSize: 30,
            padding: 40,
          }}
        >
          {text}
        </Text>
      </Image>
    );
  }
}

La deuxième façon consiste à utiliser les propriétés de mise en page. Prenez un <View> dans un conteneur et définissez {position:'absolute', width: '100%', height: '100%'}. Dans ce <View> insérez le <Image> Et mettre flex: 1. Vous pouvez également ajouter resizeMode. Maintenant, écrivez un frère <View> dans le même conteneur et définissez {flex: 1, backgroundColor: 'transparent'}. Dans ce frère <View> placez votre contenu. Vous pouvez définir opacity pour le <Image> ou le frère <View>.

Voici l'exemple:

const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png';

export default class BackgroundImage extends Component {
  render() {
    const resizeMode = 'center';
    const text = 'I am some centered text';

    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#eee',
        }}
      >
        <View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
        >
          <Image
            style={{
              flex: 1,
              resizeMode,
            }}
            source={{ uri: remote }}
          />
        </View>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            justifyContent: 'center',
          }}
        >
          <Text
            style={{
              textAlign: 'center',
              fontSize: 40,
            }}
          >
            {text}
          </Text>
        </View>
      </View>
    );
  }
}
2
Shashank

Structurez votre code comme ci-dessous:

...
    <Image
    source={require('./images/index.jpeg')}
    style={styles.container}>
    <View>
    <Text>
      Welcome to React Native Maulik !
    </Text>
    <Text style={styles.instructions}>
      To get started, edit index.ios.js
    </Text>
    <Text>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
    </View>
  </Image>
...

et votre style devrait être comme ci-dessous:

const styles = StyleSheet.create({
container: {
flex: 1,
width: undefined,
height: undefined,
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
  },
});
1
Maulik

Vous ne pouvez pas définir l'arrière-plan de l'image dans une vue. Essayez d'ajouter <Image> comme parent de tout le contenu comme ci-dessous

 <Image source={require('image!background')} style={styles.container}>
    ... Your Content ...
  </Image>

Référer ceci filetage SO

0
arjun

je pense en ReactNative pour gérer les images et autres composants d'utilisation des médias <Image />. J'ai lu dans le composant de documentation <View> est conçu pour créer une interface utilisateur. Mais, peut-être que si vous utiliserez le composant <Image /> en tant que props dans le composant <View>, je pense que c'est possible.

Ou si vous voulez en savoir plus sur l'image d'arrière-plan dans ReactNative, je vous recommande de lire cet article:

J'espère que ma réponse pourra vous donner une idée. Codage heureux!

0
muhammadaa

C'est la méthode la plus simple et la plus préférée!

 <ImageBackground
     source={require("../Assets/splash.png")}
      style={{width: '100%',opacity:0.95, height: '100%',justifyContent:"center",alignContent:"center",alignItems: "center"}}
    > 

                <View style={styles.InfoText}>
                <Text style={{ textAlign: "center",color:'white', letterSpacing: 1.0, 
        lineHeight: 15  }}> Hello {user.email},</Text>
    </View>
    </ImageBackground>

Cela doit faire l'affaire .. N'oubliez pas d'importer l'arrière-plan de l'image de React Native en haut de votre application!

Ceci est un nouvel ajout pour réagir natif!

0
Rishav Kumar