React Native【实战范例】银行卡(含素材)

c 复制代码
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

相关推荐
张元清3 天前
从零开始编写 useWindowSize Hook
react native·react.js
_一两风5 天前
React性能优化深度指南:从基础到高级技巧
react native·性能优化
谢尔登7 天前
【React Native】路由跳转
javascript·react native·react.js
Carson带你学Android7 天前
都2025了,【跨平台框架】到底该怎么选?
android·flutter·react native
谢尔登9 天前
【React Native】布局和 Stack 、Slot
javascript·react native·react.js
Misha韩9 天前
React Native 基础tabBar和自定义tabBar - bottom-tabs
android·react native
wayne21411 天前
从零开始学习 Redux:React Native 项目中的状态管理
学习·react native·react.js
OEC小胖胖11 天前
React Native 在 Web 前端跨平台开发中的优势与实践
前端·react native·react.js·前端框架·web
henujolly11 天前
react native学习record one month
学习·react native·react.js
wayne21412 天前
跨平台移动开发技术深度分析:uni-app、React Native与Flutter的迁移成本、性能、场景与前景
react native·架构