☰

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

tag-icon • tag-icon javascript react-native
React Nativeでフルスクリーンの背景画像を追加する最良の方法は何ですか？質問する

ビューにフルスクリーン画像を追加したかったので、このコードを書きました

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 画面サイズをどうやって見つければいいのでしょうか?

ピクセル密度にアクセスするための API は見たことがありますが、画面サイズについては何も知りません...

何か案が？

ベストアンサー1

（これは廃止されました。画像背景）

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

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

おすすめ記事