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

Question

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

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

我的文本组件 header 看起来像这样（完整计时器代码请参阅下面的更新）：

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

空白处我把我能想到的都试过了包括：CalculateTimeSize(remainingTime), CalculateTimeSize({remainingTime}), {CalculateTimeSize(remainingTime)}, and {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)},
            fontFamily: 'Arial',
            fontWeight: 'bold'
        }}>
            {FormatTime({ remainingTime })}
        </Animated.Text>
    )}
</CountdownCircleTimer>

Answer 1

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

这试图de-structure a key from json。但是在调用函数时传递了单个值

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

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

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

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

fontSize: {CalculateTimeSize(remainingTime)},

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

Answer 2

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

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

<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;
}

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

Change fontSize for text component with function in React Native

text-styling

react-native