首页 > 解决方案 > 如果高度为百分比,如何根据父组件的高度设置文本的字体大小?

问题描述

import React from "react";
import { Image, StyleSheet, Text, View } from "react-native";
    
function ProductCard2({ style }) {
  return (
    <View style={style}>
      <Image
        style={styles.image}
        source={{ uri: "https://picsum.photos/1440/2842?random=${1}" }}
      />
      <Text style={styles.title}>
        Momo
      </Text>
      <Text style={styles.price}>Rs 100</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  image: {
    flex: 7,
  },
  title: { flex: 1, textAlignVertical: "center", fontSize: 24 },
  price: { flex: 1, textAlignVertical: "center", fontSize: 21 },
});

export default ProductCard2;

这里的 style 属性包含高度的百分比。如何使我的 fontSize 取决于 View 组件的高度?我不能在样式道具中使用高度值,因为它是百分比。

标签: react-native

解决方案


推荐阅读