web-dev-qa-db-ja.com

React-native：Layout（View）の背景に画像を設定する方法

今、私は背景画像を以下のコードで設定していますが、1つの追加の画像ビューを作成して画像を表示し、正常に動作しています。

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

今私の質問は次のとおりです：背景画像をビューに直接設定する方法はありますか？

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

上記のコードは私のために働いていません。

reactjslayoutreact-nativebackground-image
8
Mohd Shahzad

<Image />を親コンポーネントとして使用して子をネストすることは非推奨であり、すぐにエラーがスローされます（これを書いている時点で）。代わりに<ImageBackground />を使用してください。 ImageBackground内に何でもネストできます。 <Image />に渡すことができるすべての小道具をこれに渡すことができます。

this を参照してください。

8
Harshana Abeyaratne

これには2つのアプローチがあります。 1つは、開始タグと終了タグ<Image>タグの間にすべてを入れることです。もう1つは、レイアウトプロパティを使用しています。このリンクを参照してください： https://medium.com/reactnative/background-images-in-react-native-191f3ed95a45

最初の方法は、<Image>をコンテナとして使用することです。 <Image>と</Image>の間にコンテンツを配置します。コンテンツのbackgroundColor: 'transparent'を必ず設定してください。 Androidはデフォルトで提供しますが、iPhoneは提供しません。したがって、一貫性を保つために、明示的に記述する必要があります。Reactこの方法は間もなくエラーになりますので、後者の方法をお勧めします。

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>
    );
  }
}

2番目の方法は、レイアウトプロパティを使用することです。コンテナで<View>を取得し、{position:'absolute', width: '100%', height: '100%'}を設定します。この<View>に<Image>を挿入し、flex: 1を設定します。 resizeModeを追加することもできます。同じコンテナに兄弟<View>を書き込み、{flex: 1, backgroundColor: 'transparent'}を設定します。この兄弟<View>にコンテンツを配置します。 <Image>または兄弟<View>のいずれかにopacityを設定できます。

以下に例を示します。

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

以下のようにコードを構成します。

...
    <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>
...

あなたのスタイルは次のようになります：

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

ビューに画像の背景を設定することはできません。以下のように、すべてのコンテンツビューの親として<Image>を追加してみてください

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

これを参照してください SOスレッド

0
arjun

画像を管理するためのReactNativeコンポーネント<Image />を使用すると思います。ドキュメントコンポーネント<View>を読んで、UIを構築するように設計されています。しかし、おそらくコンポーネント<Image />をコンポーネント<View>のpropsとして使用する場合、それは可能だと思います。

または、ReactNativeで背景画像について学びたい場合は、この記事を読むことをお勧めします。

私の答えがあなたにアイデアを与えることを願っています。ハッピーコーディング！

0
muhammadaa

これが最も簡単で最も好ましい方法です！

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

これはトリックを行う必要があります。アプリの上部にあるネイティブのリアクションから画像の背景をインポートすることを忘れないでください！

これはネイティブに反応する新しい追加です！

0
Rishav Kumar