web-dev-qa-db-ja.com

Reactネイティブアプリの全画面背景画像

ログインビューに完全な背景画像を設定しようとしています。

Stackoverflowでその質問を見つけました： React Native にフルスクリーンの背景画像を追加する最良の方法は何ですか？

だから私はそこのようにそれをしました、しかしそれはうまくいきませんでした：

enter image description here

var login = React.createClass({
  render: function() {
    return (
      <View style={ styles.container }>
        <Image source={require('../images/login_background.png')} style={styles.backgroundImage} />
        <View style={ styles.loginForm }>
          <Text>TEST</Text>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  },

  loginForm: {
  },
});

何が悪いのかわかりません。任意の助けいただければ幸いです。

編集：皆さんがそれを見てみたい場合のために、これがアプリです-> rnplay.orgのフルサイズの背景画像の例 。私はそれを編集可能にする方法がわかりません：/

ありがとう:)

background-imagefullscreenreact-native
7
JV Lobo

次の2つの方法のいずれかを試してください。

最初のは、あなたのposition: 'absolute'ログインフォーム：

var styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    backgroundImage: {
        flex: 1,
        resizeMode: 'cover', // or 'stretch'
    },
    loginForm: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    },
});

2番目の方法では、ImageViewをコンテナーとして使用します。

render: function() {
    return (
        <View style={ styles.container }>
            <Image source={require('../images/login_background.png')} style={styles.backgroundImage}>
                <View style={ styles.loginForm }>
                    <Text>TEST</Text>
                </View>
            </Image>
        </View>
    );
}
13
kamikazeOvrld

ImageBackgroundコンポーネントを使用する必要があります。 Reactネイティブドキュメント）を参照

<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
</ImageBackground>
13
Peretz30

私は愚かな間違いをしていた...

Textコンポーネントの背景が白く、問題はImageと...

したがって、解決策は、@ Chernivと@kamikazeOvrldが言ったように、Imageタグ内に情報をラップすることですが、その中のコンポーネントに透明な背景も設定します。

以下は完全に機能する例です：

enter image description here

コード：

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  StatusBarIOS
} = React;

StatusBarIOS.setHidden(true);

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={ styles.container }>
        <Image source={{uri: 'http://puu.sh/mJ1ZP/6f167c37e5.png'}} style={styles.backgroundImage} >
          <View style={ styles.loginForm }>
            <Text style={ styles.text }>Some text</Text>
          </View>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch',
    justifyContent: 'center',
  },

  loginForm: {
    backgroundColor: 'transparent',
    alignItems: 'center',
  },

  text: {
    fontSize: 30,
    fontWeight: 'bold',
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

rnplay.org にもあります

私のような人の助けになることを願っています。一日中コードを書いていると、あなたの脳は思い通りに機能しません。

ありがとう。

4
JV Lobo

ウメシュ、あなたの問題への答えはすでに明確に述べられています。

<Image />コンポーネントには、子コンポーネントは含まれていません。必要なのは、<ImageBackground />コンポーネントを使用することです。これにより、他のコンポーネントをそのコンポーネントに埋め込んで、子として作成できます。あなたの場合、あなたはこのようなことをするべきです

<ImageBackground> <Text>Write your text and some other stuffs here...</Text> </ImageBackground>

注：flex: 1 or widthを忘れずに追加してください。

私の答えが十分に明確であることを願っています。ありがとう。

1
SirPhemmiey
 <View style={styles.imageCancel}>
         <TouchableOpacity onPress={() => { this.setModalVisible(!this.state.visible) }}>
                 <Text style={styles.textCancel} >Close</Text>
          </TouchableOpacity>
    </View>
const styles = StyleSheet.create({
 imageCancel: {
         height: 'auto',
         width: 'auto',
         justifyContent:'center',
         backgroundColor: '#000000',
         alignItems: 'flex-end',
    },
     textCancel: {
        paddingTop:25,
        paddingRight:25,
        fontSize : 18,
        color : "#ffffff",
        height: 50,
        },
 }};

enter image description here

0
Keshav Gera