Question

假设我有一个基本的基础级StyledText组件;

import styled from 'styled-components/native'

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

然后，我有一个处理标题的Text组件的扩展名;

import StyledText from '../StyledText'

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

export default StyledTitle

到目前为止很简单。

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

为了澄清，围绕增加大小的逻辑没有问题，问题是导入并使用util用于任何扩展Text组件的每次使用。

例如，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

问题是必须在应用程序中一直导入和引用util文件。

Answer 1

前一段时间我遇到过类似的问题，我通过创建一个以大小为参数的通用函数来解决它，并返回适合不同屏幕分辨率的新大小。您可以对应用中的每个尺寸使用此功能。

这是文件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

React Native Styled组件动态字体大小调整

1 个答案: