RN 设置背景图片(使用ImageBackground组件)

在RN版本0.46版本的时候添加了ImageBackground控件。ImageBackground可以设置背景图片,使用方法和image一样,里面嵌套了其他的组件

javascript 复制代码
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/

相关推荐
笔尖的记忆8 分钟前
浏览器的观察者
前端·javascript
高热度网8 分钟前
初始化electron项目运行后报错 electron uninstall 解决方法
前端·javascript
前端AK君9 分钟前
React license 争议
前端·react.js
我的写法有点潮10 分钟前
竟然被element-plus背刺了
前端·javascript·vue.js
Damon小智34 分钟前
从零开始XR开发:Three.js实现交互式3D积木搭建器
javascript·3d·xr
掘金安东尼1 小时前
前端周刊434期(2025年9月29日–10月5日)
前端·javascript·面试
掘金安东尼1 小时前
前端周刊433期(2025年9月22日–9月28日)
前端·javascript·github
井柏然1 小时前
为什么打 npm 包时要将 Vue/React 进行 external 处理?
javascript·vite·前端工程化
江城开朗的豌豆1 小时前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆1 小时前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序