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/

相关推荐
拖拉斯旋风3 分钟前
0基础学习Openai之:通过Prompt生成你心中的那幅画🎨
javascript·openai
boboj13 分钟前
Vue过渡至React的基础理解
前端·react.js
梵得儿SHI1 小时前
Vue 数据绑定深入浅出:从 v-bind 到 v-model 的实战指南
前端·javascript·vue.js·双向绑定·vue 数据绑定机制·单向绑定·v-bind v-model
Moment1 小时前
Electron 发布 39 版本 ,这更新速度也变态了吧❓︎❓︎❓︎
前端·javascript·node.js
自由日记1 小时前
前端学习:选择器的类别
前端·javascript·学习
江城开朗的豌豆1 小时前
Webpack打包:从“庞然大物”到“精致小可爱”
前端·javascript
JS.Huang2 小时前
【JavaScript】构造函数与 new 运算符
开发语言·javascript·原型模式
艾小码2 小时前
2025年组件化开发这样做,效率提升300%
前端·javascript
左耳咚11 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试