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を見ましたが、画面サイズについては何もしていません...
何か案が？
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>をあなたのイメージを包むことから取り除くことができると確信しています、そしてこれはうまくいくでしょう。
（これは非推奨になりました。 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,
}
};
注：この解決策は古いです。代わりに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>
私は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を使用することも、含むこともできます。
お役に立てれば！
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>
背景画像として使用したい場合は、v0.46で2017年6月末に導入された新しい<ImageBackground>コンポーネントを使用する必要があります。 <Image>は間もなくしませんが、入れ子をサポートします。
これが コミット の要約です。
コンポーネント内のネストビューのサポートを削除しています。この機能を持っていると
intrinsinc content sizeの<Image>のサポートが不可能になるので、これを行うことにしました。そのため、移行プロセスが完了すると、画像サイズを明示的に指定する必要がなくなり、実際の画像ビットマップから推測できます。そしてこれがステップ＃0です。
非常にシンプルなスタイルでこの機能を実装する非常にシンプルなドロップイン置換です。あなたが何かを中に入れたいならば、代わりに使ってください。
神よ、最後に私は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%'
}
それは素晴らしい友達に働きます...楽しんでください
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
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 >
最新の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
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}/>
値nullの幅と高さは私にはうまくいきません、そして私は上、下、左、そして右の位置を使うことを考えました、そしてそれはうまくいきました。例：
bg: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
resizeMode: 'stretch',
},
そしてJSX：
<Image style={styles.bg} source={{uri: 'IMAGE URI'}} />
（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'
},
});バックグラウンドを実装する最も簡単な方法：
<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
}
});
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,
}
};
import { ImageBackground } from "react-native";
<ImageBackground
style={{width: '100%', height: '100%'}}
source={require('../assets/backgroundLogin.jpg ')}> //path here inside
<Text>React</Text>
</ImageBackground>
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
画像をコンテナとして使用することもできます。
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',
},
});
まだ解決していない場合は、React Native v.0.42.0にresizeModeがあります。
<Image style={{resizeMode: 'contain'}} source={require('..img.png')} />
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',
}
});このコードを使用して、背景画像の問題を解決しました。
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'
}
});
もう一つの簡単な解決策：
<Image source={require('../assets/background.png')}
style={{position: 'absolute', zIndex: -1}}/>
<View style={{flex: 1, position: 'absolute'}}>
{/*rest of your content*/}
</View>