假设我有一个基本的、基本级别的 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
到目前为止很简单。
我需要做的是根据设备的大小动态增加字体大小。一个简单的函数就可以处理这个。但是有没有一种方法可以只从主 StyledText 组件调用一次调整大小函数或实用程序,而不是在整个应用程序中使用 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
关于javascript - React Native Styled 组件动态字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47099185/