React Native【实战范例】银行卡（含素材）

import React from "react";
import { Image, ImageBackground, StyleSheet, Text, View } from "react-native";
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from "react-native-safe-area-context";
import bg_card from "../../assets/images/bg_card.png";
import icon_bank from "../../assets/images/icon_bank.png";
export default function HomeScreen() {
  const insets = useSafeAreaInsets();
  return (
    <SafeAreaProvider>
      <View
        style={{
          flex: 1,
          paddingTop: insets.top, // 顶部安全区域
          paddingBottom: insets.bottom, // 底部安全区域
          paddingLeft: 10,
          paddingRight: 10,
        }}
      >
        <View style={styles.root}>
          <ImageBackground
            style={styles.viewStyle}
            imageStyle={styles.imgStyle}
            source={bg_card}
          >
            <Image style={styles.icon_logo} source={icon_bank} />
            <Text style={styles.txtBank}>
              {`招商银行\n`}
              <Text style={styles.cardTypeTxt}>{`储蓄卡\n\n`}</Text>
              <Text style={styles.cardNoTxt}>●●●● ●●●● ●●●● 3068</Text>
            </Text>
          </ImageBackground>
        </View>
      </View>
    </SafeAreaProvider>
  );
}
const styles = StyleSheet.create({
  page: {
    padding: 10,
  },
  root: {
    width: "100%",
    height: "100%",
    flexDirection: "column",
  },
  viewStyle: {
    width: "100%",
    height: 150,
    flexDirection: "row",
    alignItems: "flex-start",
  },
  imgStyle: {
    resizeMode: "cover",
    borderRadius: 12,
  },
  icon_logo: {
    width: 48,
    height: 48,
    borderRadius: 24,
    marginLeft: 20,
    marginTop: 20,
  },
  txtBank: {
    fontSize: 24,
    color: "white",
    marginLeft: 10,
    marginTop: 21,
    fontWeight: "bold",
  },
  cardTypeTxt: {
    fontSize: 20,
    color: "#FFFFFFA0",
    fontWeight: "normal",
  },
  cardNoTxt: {
    fontSize: 26,
    color: "white",
  },
});

assets/images/bg_card.png

assets/images/icon_bank.png