使用 React Native 中的函数更改文本组件的字体大小

问题描述

我正在尝试根据剩余时间调整计时器内文本对象的字体大小。由于要显示的数字较少，我希望文本变大。我遇到的问题是您似乎无法在样式定义中调用函数（请更正我在那里错误陈述的任何内容，我正在努力学习）。一、功能：

CalculateTimeSize = ({ remainingTime }) => {
    let TimerTextSize
    if( remainingTime < 60 ) {
        TimerTextSize = 60
    } else if( remainingTime < 3600 ) {
        TimerTextSize = 40
    } else {
        TimerTextSize = 20
    }
    return TimerTextSize;
}

我的文本组件标题如下所示（请参阅下面的更新以获取完整的计时器代码）：

<Animated.Text style={{ fontSize: _____________,fontFamily: 'Arial',...>
    ...
</Animated.Text>

在空白处，我尝试了所有我能想到的方法，包括：CalculateTimeSize(remainingTime)、CalculateTimeSize({remainingTime})、{CalculateTimeSize(remainingTime)} 和 {CalculateTimeSize({remainingTime})}

显然，从我在花括号周围乱扔的方式来看，我只是不知道自己在做什么。感谢您提供的任何帮助。

更新
更好地查看CalculateTimeSize 函数调用的完整计时器代码：

<CountdownCircleTimer
    isPlaying
    duration = { 65 }
    colors = { ColorScheme.Orange.e }
    onComplete = { () => {
        console.log('Timer expired')
        return [ true,0 ]
    }}
>
    {({ remainingTime,animatedColor }) => (
        <Animated.Text style={{
            fontSize: {CalculateTimeSize(remainingTime)},fontWeight: 'bold'
        }}>
            {FormatTime({ remainingTime })}
        </Animated.Text>
    )}
</CountdownCircleTimer>

解决方法

您试图访问一个不存在的变量

这会尝试 Twitter-Card Meta Tag Issue。但是在调用函数时传递的是单个值

CalculateTimeSize = ({剩余时间}) => { ... }

把上面的改成这个，这样就可以访问到实际传递的值了

CalculateTimeSize = (remainingTime) => {
    ...
}

将函数调用从字体大小更改为此，因为它可能会给出 uhh 错误。 （因为当我尝试在样式表中以您的方式调用函数时，它给出了错误）

fontSize: {CalculateTimeSize(remainingTime)},

...
<Animated.Text style={{
    fontSize: CalculateTimeSize(remainingTime),...
}}>
    ...
</Animated.Text>
...

,

我讨厌这种情况发生。我现在确实有工作代码，但我不确定它与我以前的代码有何不同，因为我在此过程中尝试了很多不同的事情。我会在下面贴出代码，但我会先评论那些似乎让我自己和 Darshan 感到困惑的额外花括号。

我首先在那里放置了花括号，因为 GitHub 存储库上的计时器组件示例代码包含它们（如果您想查看：https://github.com/vydimitrov/react-countdown-circle-timer/tree/master/packages/web#react-countdown-circle-timer）。下面的代码与它们一起工作，没有它们就无法工作。也许正在发生的事情实际上是解构，正如 Darshan 指出的那样，但我对解构的理解不足以以一种或另一种方式说。我确实相信花括号与 CountownCircleTimer 在“幕后”所做的事情有关。再说一次，我实际上对组件/编程的总体理解不足以深入研究它。我所知道的是我一直在研究代码，最终以下工作有效。我希望这会在某些时候对某人有所帮助。

<CountdownCircleTimer
    isPlaying
    duration = { 65 }
    colors = { ColorScheme.Orange.e }
    size = { 175 }
    onComplete = { () => {
        console.log('Timer expired')
        return [ true,0 ]
    }}
    size = { 175 }
    trailColor = { ColorScheme.Orange.j }
>
    {({ remainingTime,animatedColor }) => (
        <Animated.Text style = {{
            fontSize: CalculateTimeSize({ remainingTime }),fontFamily: 'Arial',fontWeight: 'bold'
        }}>
            {FormatTime({ remainingTime })}
        </Animated.Text>
    )}
</CountdownCircleTimer>

CalculateTimeSize = ({ remainingTime }) => {
    let TimerTextSize
    if ( remainingTime < 11 ) {
        TimerTextSize = 90
    } else if( remainingTime < 60 ) {
        TimerTextSize = 75
    } else if( remainingTime < 3600 ) {
        TimerTextSize = 50
    } else {
        TimerTextSize = 35
    }
    return TimerTextSize;
}