Javascript React本机样式组件动态字体大小

假设我有一个基本的、基本级别的StyledText组件

import styled from 'styled-components/native'

const StyledText = styled.Text`
  font-size: 16px;
  color: pink;
`
export default StyledText

然后我有一个文本组件的扩展来处理标题

import StyledText from '../StyledText'

const StyledTitle = StyledText.extend`
  color: black;
  font-weight: bold;
  font-size: 20px;
`

export default StyledTitle

到目前为止很简单

我需要做的是根据设备的大小动态增加字体大小。一个简单的函数可以处理这个问题。但是有没有一种方法可以让Size函数或util只能从主StyledText组件调用一次，而不是在整个应用程序中对StyledText扩展的每个实例重复调用

只是想澄清一下，增加大小的逻辑并没有问题，问题是在任何扩展文本组件的每次使用中导入和使用util

例如，util可能如下所示

// utils
export function fontSize(size) {
  // do some logic here to increase the size, or whatever...
  return `
    font-size: ${size}px;
  `
}

import styled from 'styled-components/native'
import { fontSize } from 'utils/StyledUtils'

const StyledText = styled.Text`
  ${fontSize(16)}
  color: pink;
`
export default StyledText

然后这样用,

// utils
export function fontSize(size) {
  // do some logic here to increase the size, or whatever...
  return `
    font-size: ${size}px;
  `
}

import styled from 'styled-components/native'
import { fontSize } from 'utils/StyledUtils'

const StyledText = styled.Text`
  ${fontSize(16)}
  color: pink;
`
export default StyledText

---

问题是，util文件必须在整个应用程序中导入和引用。

我不久前也遇到过类似的问题，我通过创建一个通用函数解决了这个问题，该函数将大小作为参数，并返回适合不同屏幕分辨率的新大小。您可以对应用程序中的每种大小使用此功能

以下是文件responsive.js中的函数：

import { Dimensions } from 'react-native'

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').height;

export const ResponsiveSize = (size) => {
    if(deviceHeight===568) { return size }
    else if(deviceHeight===667) size*1.17 
    else if(deviceHeight===736) size*1.29 
    else if(deviceHeight===1024) size*1.8 
}

请注意，大小乘以一些固定的数字（我是为iOS设备做的），您可以根据需要修改这些数字

然后，您可以按以下方式设置文本样式：

import styled from 'styled-components/native'
import { ResponsiveSize } from './responsive'

const StyledText = styled.Text`
  font-size: ResponsiveSize(16);
  color: pink;
`
export default StyledText

---

这不是你想要的，但可能会给你一个想法。谢谢，但不是真的。。我刚刚对问题进行了编辑，以进一步阐述这个问题。我看不出你的问题。util文件不必在整个应用程序中导入和引用。它只需要从

StyledText

模块中导入和引用。你将导入StyledText并在整个应用程序中使用它，但你不必同时导入UTIL；StyledTitle、StyledLabel等。所有这些都需要导入并使用util函数——这是我试图避免的场景，但似乎不可能