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/

相关推荐
一只小风华~11 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
十碗饭吃不饱11 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.12 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
每天吃饭的羊13 小时前
state和ref
前端·javascript·react.js
GEO_YScsn13 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing13 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
摇滚侠13 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
GISer_Jing13 小时前
滴滴二面准备(一)
前端·javascript·面试·ecmascript
lecepin13 小时前
AI Coding 资讯 2025-09-10
前端·javascript·面试
书源14 小时前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js