如何在React Native中将静态图像拉伸为背景？

Question

我想在我的本机应用中使用背景图片， 图像比屏幕小，所以我必须拉伸它。

但如果图片从资产包中加载

，则无法正常工作

var styles = StyleSheet.create({
  bgImage: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'stretch',
    resizeMode: 'stretch',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

<Image source={require('image!background')} style={styles.bgImage}>
  <Text style={styles.welcome}>
    Welcome to React Native!
  </Text>
</Image>

它看起来像这样：

但是，通过source={{uri: 'background-image-uri'}}：

，它适用于远程图像

Answer 1

从Github问题：Image {require} is broken in React Native for Resizing，您可以尝试<Image style={{width: null, height: null}}，希望Facebook能尽快解决。

Answer 2

通常不应将Image标记视为容器视图。

使用包含（拉伸/包含）图像的绝对定位包装似乎效果很好：

var styles = StyleSheet.create({
    bgImageWrapper: {
        position: 'absolute',
        top: 0, bottom: 0, left: 0, right: 0
    },
    bgImage: {
        flex: 1,
        resizeMode: "stretch"
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    }
});



<View style={{ flex: 1 }}>
  <View style={styles.bgImageWrapper}>
    <Image source={require('image!background')} style={styles.bgImage} />
  </View>
  <Text style={styles.welcome}>
    Welcome to React Native!
  </Text>
</View>

Answer 3

您可以随时使用double tcplisten(int port, int max, int mode) { CSocket* sock = new CSocket(); if(sock->tcplisten(port, max, mode)) return AddSocket(sock); delete sock; return -1; } double tcpaccept(int sockid, int mode) { CSocket*sock = (CSocket*)sockets.item(sockid); if(sock == NULL)return -1; CSocket*sock2 = sock->tcpaccept(mode); if(sock2 != NULL)return AddSocket(sock2); return -1; } ... CSocket::CSocket(SOCKET sock) { sockid = sock; udp = false; format = 0; } bool CSocket::tcplisten(int port, int max, int mode) { if((sockid = socket(AF_INET, SOCK_STREAM, IPPROTO_TCP)) == INVALID_SOCKET) return false; SOCKADDR_IN addr; addr.sin_family = AF_INET; addr.sin_addr.s_addr = INADDR_ANY; addr.sin_port = htons(port); if(mode)setsync(1); if(bind(sockid, (LPSOCKADDR)&addr, sizeof(SOCKADDR_IN)) == SOCKET_ERROR) { closesocket(sockid); return false; } if(listen(sockid, max) == SOCKET_ERROR) { closesocket(sockid); sockid = INVALID_SOCKET; return false; } return true; } CSocket* CSocket::tcpaccept(int mode) { if(sockid == INVALID_SOCKET) return NULL; SOCKET sock2; if((sock2 = accept(sockid, (SOCKADDR *)&SenderAddr, &SenderAddrSize)) != INVALID_SOCKET) { //This does NOT get output after that 1000-'attack' test. std::cout << "Accepted new connection!" << std::endl; CSocket*sockit = new CSocket(sock2); if(mode >=1)sockit->setsync(1); return sockit; } return NULL; } 模块获取屏幕宽度，并将图片的宽度样式设置为该值：

Exception in thread "main" java.net.ConnectException: Connection refused: connect
    at java.net.DualStackPlainSocketImpl.connect0(Native Method)
    at java.net.DualStackPlainSocketImpl.socketConnect(DualStackPlainSocketImpl.java:79)
    at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:339)
    at java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:200)
    at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:182)
    at java.net.PlainSocketImpl.connect(PlainSocketImpl.java:172)
    at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392)
    at java.net.Socket.connect(Socket.java:579)
    at java.net.Socket.connect(Socket.java:528)
    at java.net.Socket.<init>(Socket.java:425)
    at java.net.Socket.<init>(Socket.java:208)
    at sockettest.SocketTest.main(SocketTest.java:63)
Java Result: 1

远程图像工作正常也很奇怪...您可以尝试使用Dimensions加载var Dimensions = require('Dimensions'); var {width, height} = Dimensions.get('window'); 语法的本地静态图像。

Answer 4

对我来说使用 undefined 而不是 null 值。在typescript环境下会提示notassignable

 bgImage: {
flex: 1,
width: undefined,
height: undefined,
resizeMode: 'stretch',

},