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/

相关推荐
萧大侠jdeps11 分钟前
图片生成视频-右进
前端·javascript·音视频
Domain-zhuo33 分钟前
JS对于数组去重都有哪些方法?
开发语言·前端·javascript
明月清风徐徐1 小时前
Vue实训---2-路由搭建
前端·javascript·vue.js
鸽鸽程序猿1 小时前
【前端】javaScript
开发语言·前端·javascript
秦时明月之君临天下2 小时前
React和Next.js的相关内容
前端·javascript·react.js
米奇妙妙wuu2 小时前
React中 setState 是同步的还是异步的?调和阶段 setState 干了什么?
前端·javascript·react.js
李刚大人2 小时前
react-amap海量点优化
前端·react.js·前端框架
new出一个对象8 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥9 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
前端Hardy9 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html