RN 设置背景图片（使用ImageBackground组件）

最新推荐文章于 2024-05-22 21:25:58 发布

徐同保

最新推荐文章于 2024-05-22 21:25:58 发布

阅读量1.1k

点赞数

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/xutongbao/article/details/131954219

版权

在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;