React Native Styled 组件动态字体大小答案

【问题标题】：React Native Styled components dynamic font sizingReact Native Styled 组件动态字体大小
【发布时间】：2018-04-16 09:17:31
【问题描述】：

假设我有一个基本的、基本级别的 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 扩展的每个实例重复？

澄清一下，增加大小的逻辑没有问题，问题在于每次使用任何扩展的 Text 组件时都导入和使用 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

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

【问题讨论】：

This 不是您想要的，但也许它会给您一个想法。
谢谢，但不是真的……我刚刚编辑了问题以扩展问题。
我没有看到你的问题。不需要在整个应用程序中一直导入和引用 util 文件。它只需要从StyledText 模块中导入和引用。您将导入 StyledText 并在整个应用程序中使用它，但您也不必同时导入 utils。
然后StyledText会被扩展几次，组成另一个文本元素； StyledTitle、StyledLabel 等。所有这些都需要导入和使用该 util 函数——这是我试图避免的场景，但似乎不可能

标签： javascript react-native styled-components

【解决方案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

【讨论】：