web-dev-qa-db-ja.com

React Nativeでフルスクリーンの背景画像を追加するための最良の方法は何ですか

私はこのコードを書くようにViewに全画面画像を追加したいと思いました

return (
    <View style={styles.container}>
        <Image source={require('image!Egg')}  style={styles.backgroundImage}>
    </View>
)

そしてスタイルを

var styles = StyleSheet.create({
container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     flexDirection: 'column',
},
     backgroundImage:{
     width:320,
     height:480,
   }
...

しかし、このようにして私は実際のiPhoneの画面サイズをどのように見つけるべきでしょうか?

Pixel DensityにアクセスするためのAPIを見ましたが、画面サイズについては何もしていません...

何か案が?

132
talpaz

flex: 1要素に<Image>スタイルを使用して、画面全体に表示させることができます。その後、画像のサイズ変更モードの1つを使用して、画像が要素全体に表示されるようにすることができます。

<Image source={require('image!Egg')} style={styles.backgroundImage} />

スタイル:

import React from 'react-native';

let { StyleSheet } = React;

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  }
});

私はあなたが<View>をあなたのイメージを包むことから取り除くことができると確信しています、そしてこれはうまくいくでしょう。

96
Josh

(これは非推奨になりました。 ImageBackground を使用できます)

これが私のやり方です。主な取り決めは静的な固定サイズを取り除くことでした。

class ReactStrap extends React.Component {
  render() {
    return (
      <Image source={require('image!background')} style={styles.container}>
        ... Your Content ...
      </Image>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    // remove width and height to override fixed static size
    width: null,
    height: null,
  }
};
168
oronbz

注:この解決策は古いです。代わりにhttps://facebook.github.io/react-native/docs/images.html#background-image-via-nesting を参照してください

この解決策を試してください。正式にサポートされています。私はちょうどそれをテストしましたそして完璧に動作します。

var styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
  }
});

そして背景画像として使用することに関しては、ちょうど以下をしなさい。

<Image style={styles.backgroundImage}>
  <View>
    <Text>All your stuff</Text>
  </View>
</Image>
41
Vinod Sobale

私はreact-native version = 0.19.0を使ってAndroidのために無駄にこれらの答えのいくつかを試してみました。

何らかの理由で、スタイルシート内のresizeModeが正しく機能しませんでしたか?しかし、sytlesheetが持っていたとき

backgroundImage: {
flex: 1,
width: null,
height: null,
}

そして、Imageタグ内でresizeModeを指定しました:

<Image source={require('path/to/image.png')} style= {styles.backgroundImage} resizeMode={Image.resizeMode.sretch}>

それは完璧に働いた!上記のように、Image.resizeMode.coverを使用することも、含むこともできます。

お役に立てれば!

19
Tab

Braden Rockwell Napier答え に基づいて、私はこのBackgroundImageコンポーネントを作りました。

BackgroundImage.js

import React, { Component } from 'react'
import { Image } from 'react-native'

class BackgroundImage extends Component {
  render() {
    const {source, children, style, ...props} = this.props
    return (
      <Image source={ source }
             style={ { flex: 1, width: null, height: null, ...style } }
             {...props}>
        { children }
      </Image>
    )
  }
}
BackgroundImage.propTypes = {
  source: React.PropTypes.object,
  children: React.PropTypes.object,
  style: React.PropTypes.object
}
export default BackgroundImage

someWhereInMyApp.js

 import BackgroundImage from './backgroundImage'
 ....
 <BackgroundImage source={ { uri: "https://facebook.github.io/react-native/img/header_logo.png" } }>
    <Text>Test</Text>
 </BackgroundImage>
12
Ryan Wu

背景画像として使用したい場合は、v0.46で2017年6月末に導入された新しい<ImageBackground>コンポーネントを使用する必要があります。 <Image>は間もなくしませんが、入れ子をサポートします。

これが コミット の要約です。

コンポーネント内のネストビューのサポートを削除しています。この機能を持っているとintrinsinc content size<Image>のサポートが不可能になるので、これを行うことにしました。そのため、移行プロセスが完了すると、画像サイズを明示的に指定する必要がなくなり、実際の画像ビットマップから推測できます。

そしてこれがステップ#0です。

非常にシンプルなスタイルでこの機能を実装する非常にシンプルなドロップイン置換です。あなたが何かを中に入れたいならば、代わりに使ってください。

11
antoine129

神よ、最後に私はReact-Native V 0.52-RCとnative-baseのための素晴らしい方法を見つけます。

コンテンツタグは次のようになります。// ========================================= =======================

<Content contentContainerStyle={styles.container}>
    <ImageBackground
        source={require('./../assets/img/back.jpg')}
        style={styles.backgroundImage}>
        <Text>
            Some text here ...
        </Text>
    </ImageBackground>
</Content>

そしてあなたの本質的なスタイルは次のとおりです。// ============================================= ====================

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
backgroundImage:{
    flex : 1,
    width : '100%'
}

それは素晴らしい友達に働きます...楽しんでください

8
Ali Esfandiari

ImageBackgroundへの更新

<Image />をコンテナーとして使用することはしばらくの間推奨されないので、すべての答えは実際には重要なことを見逃しています。適切に使用するには、styleおよびimageStyle propを指定して<ImageBackground />を選択してください。すべての画像関連スタイルをimageStyleに適用します。

例えば:

<ImageBackground
    source={yourImage}
    style={{
      backgroundColor: '#fc0',
      width: '100%', // applied to Image
      height: '100%' 
    }}
    imageStyle={{
      resizeMode: 'contain' // works only here!
    }}
>
    <Text>Some Content</Text>
</ImageBackground>

https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js

8
Pawel

2018年3月の更新「イメージの使用」は非推奨ですImageBackgroundの使用

  <ImageBackground 
          source={{uri: 'https://images.pexels.com/photos/89432/pexels-photo-89432.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb'}}
          style={{ flex: 1,
            width: null,
            height: null,
            }}
        >
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Your Contents</Text>
       </View>

 </ImageBackground >
8
Hitesh Sahu

最新のOct'17(RN> = .46)

import React from 'react';
import { 
  ...
  ImageBackground,
} from 'react-native';

render() {
  return (
    <ImageBackground source={require('path/to/img')} style={styles.urStyle}>
    </ImageBackground>
  );
}

http://facebook.github.io/react-native/releases/0.49/docs/images.html#background-image-via-nesting

4
Adesh Shah

0.14以降、このメソッドは機能しないので、私はこれを簡単にする静的コンポーネントを作成しました。これを貼り付けるか、コンポーネントとして参照するだけです。

これは再利用可能であるべきであり、それが標準の<Image />コンポーネントであるかのように追加のスタイルとプロパティを追加することを可能にするでしょう

const BackgroundImage = ({ source, children, style, ...props }) => {
  return (
      <Image
        source={source}
        style={{flex: 1, width: null, height: null, ...style}}
        {...props}>
        {children}
      </Image>
  );
}

これを貼り付けるだけで、画像のように使用できます。表示されているビューのサイズ全体に収まるはずです(したがって、トップビューの場合は画面いっぱいに表示されます)。

<BackgroundImage source={require('../../assets/backgrounds/palms.jpg')}>
    <Scene styles={styles} {...store} />
</BackgroundImage>

プレビュー画像はこちら

画像のサイズがresizeMode = {Image.resizeMode.contain}または{Image.resizeMode.stretch}で、画像スタイルの幅をnullに設定してください

<Image source={CharacterImage} style={{width: null,}} resizeMode={Image.resizeMode.contain}/>
2
Eric Kim

値nullの幅と高さは私にはうまくいきません、そして私は上、下、左、そして右の位置を使うことを考えました、そしてそれはうまくいきました。例:

bg: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        resizeMode: 'stretch',
},

そしてJSX:

<Image style={styles.bg} source={{uri: 'IMAGE URI'}} />
2
dap1995

(RN> = .46)

画像の上にコンテンツをレンダリングする場合、コンポーネントに子を含めることはできません。絶対配置の使用を検討してください。

または、ImageBackgroundを使用することもできます。

import React from 'react';
import { 
  ...
  StyleSheet,
  ImageBackground,
} from 'react-native';

render() {
  return (
    
  <ImageBackground source={require('path/to/img')} style={styles.backgroundImage} >
      <View style={{flex: 1, backgroundColor: 'transparent'}} />
      <View style={{flex: 3,backgroundColor: 'transparent'}} >
  </ImageBackground>
    
  );
}

const styles = StyleSheet.create({
  backgroundImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    },
});
2

バックグラウンドを実装する最も簡単な方法:

<ImageBackground style={styles.container} source={require('../../images/screen_login.jpg')}>
  <View style={styles.logoContainer}>
    <Image style={styles.logo}
      source={require('../../images/logo.png')}
    />
  </View> 
  <View style={styles.containerTextInput}>
    < LoginForm />
  </View>   
</ImageBackground>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //   backgroundColor:"#0984e3"
  },
  containerTextInput: {
    marginTop: 10,
    justifyContent: 'center'
  },

  logoContainer: {
    marginTop: 100,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logo: {
    height: 150,
    width: 150
  }
});
2
Ahmad Sadiq

antoine129で既に述べたように、<ImageBackground>を使用してください。子で<Image>を使用することは現在推奨されていません。

class AwesomeClass extends React.Component {
  render() {
    return (
      <ImageBackground source={require('image!background')} style={styles.container}>
        <YourAwesomeComponent/>
      </ImageBackground>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
};
1
Aung Myat Hein
 import { ImageBackground } from "react-native";
 <ImageBackground
      style={{width: '100%', height: '100%'}}
          source={require('../assets/backgroundLogin.jpg ')}> //path here inside
          <Text>React</Text>
        </ImageBackground>
1
Naved Khan
import React, { Component } from 'react';
import { Image, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage} />
    );
  }
}

const s = StyleSheet.create({
  backgroundImage: {
      flex: 1,
      width: null,
      height: null,
  }
});

あなたはそれを試すことができます: https://sketch.expo.io/B1EAShDie (from: github.com/Dorian/sketch -active-native-apps

ドキュメント: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

1
Dorian

画像をコンテナとして使用することもできます。

render() {
    return (
        <Image
            source={require('./images/background.png')}
            style={styles.container}>
            <Text>
              This text will be on top of the image
            </Text>
        </Image>
    );
}


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

まだ解決していない場合は、React Native v.0.42.0にresizeModeがあります。

<Image style={{resizeMode: 'contain'}} source={require('..img.png')} />
1
user7103816

BackgroundImageを使用する必要があると聞いたことがありますが、将来的にはImageタグをネストできないようになっているからです。しかし、BackgroudImageに自分の背景を正しく表示させることができませんでした。私のしたことは、Viewタグの中にImageをネストし、外側のViewと画像の両方をスタイルすることでした。キーはwidthをnullに、resizeModeを 'stretch'に設定することでした。以下が私のコードです:

import React, {Component} from 'react';
import { View, Text, StyleSheet, Image} from 'react-native';

export default class BasicImage extends Component {
        constructor(props) {
          super(props);

          this.state = {};
        }

        render() {
                return (
                        <View style={styles.container}>
              <Image 
                source={this.props.source}
                style={styles.backgroundImage}
              />
      </View>
                )
        }
}

const styles = StyleSheet.create({   
                container: {
                        flex: 1,
                        width: null,
                        height: null,
                        marginBottom: 50
                },
    text: {
                marginLeft: 5,
                marginTop: 22,
                fontFamily: 'fontawesome',
        color: 'black',
        fontSize: 25,
        backgroundColor: 'rgba(0,0,0,0)',
    },
                backgroundImage: {
                        flex: 1,
                        width: null,
                        height: null,
                        resizeMode: 'stretch',
                }
});
1
Chris Adams

このコードを使用して、背景画像の問題を解決しました。

import React from 'react';
import { StyleSheet, Text, View,Alert,ImageBackground } from 'react-native';

import { TextInput,Button,IconButton,Colors,Avatar } from 'react-native-paper';

class SignInScreen extends React.Component {

    state = {
       UsernameOrEmail  : '',
       Password : '',
     }
    render() {
      return (
             <ImageBackground  source={require('../assets/icons/background3.jpg')} style {styles.backgroundImage}>
              <Text>React Native App</Text>
            </ImageBackground>
          );
    }
  }


    export default SignInScreen;

    const styles = StyleSheet.create({
     backgroundImage: {
      flex: 1,
      resizeMode: 'cover', // or 'stretch'
     }
   });
0
Adeel Ahmed

もう一つの簡単な解決策:

<Image source={require('../assets/background.png')}
      style={{position: 'absolute', zIndex: -1}}/>

<View style={{flex: 1, position: 'absolute'}}>

  {/*rest of your content*/}
</View>
0