在RN版本0.46版本的时候添加了ImageBackground控件。ImageBackground可以设置背景图片,使用方法和image一样,里面嵌套了其他的组件
import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";const image = { uri: "https://zh-hans.reactjs.org/logo-og.png" };const App = () => (<View style={styles.container}><ImageBackground source={image} style={styles.image}><Text style={styles.text}>Inside</Text></ImageBackground></View>
);const styles = StyleSheet.create({container: {flex: 1,flexDirection: "column"},image: {flex: 1,resizeMode: "cover",justifyContent: "center"},text: {color: "white",fontSize: 42,fontWeight: "bold",textAlign: "center",background: "#000000a0"}
});export default App;
参考链接:
https://www.reactnative.cn/docs/imagebackground
https://chat.xutongbao.top/