native react 可伸缩背景_React Native应用中的全屏背景图片

I'm trying to set a full background image on my login view.

So I did it like there, but it didn't work:

var login = React.createClass({

render: function() {

return (

TEST

);

}

});

var styles = StyleSheet.create({

container: {

flex: 1,

},

backgroundImage: {

flex: 1,

resizeMode: 'cover', // or 'stretch'

},

loginForm: {

},

});

I don't know what I'm doing wrong. Any help would be appreciated.

Edit: Here is the app, in case you guys want to take it a look -> Full size background image example on rnplay.org. I don't know how to do it editable :/

Thanks :)

解决方案

Try either of these two methods:

The first is similar to yours except you have position: 'absolute' on your login form:

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

},

});

The second method involves using the ImageView as a container:

render: function() {

return (

TEST

);

}