Блог

Главная - Вопросы по программированию - Измените размер шрифта для текстового компонента с помощью функции в React Native

Измените размер шрифта для текстового компонента с помощью функции в React Native

#react-native #text-styling

#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(оставшееся время), CalculateTimeSize({Оставшееся время}), {CalculateTimeSize(оставшееся время)} и {CalculateTimeSize({Оставшееся время})}

Очевидно, что, судя по тому, как я разбрасываю фигурные скобки, я просто не знаю, что я делаю. Спасибо за любую помощь, которую вы можете предоставить.

Обновить
Полный код таймера для лучшего просмотра вызова функции 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>

Комментарии:

1. Почему вы передаете значение функции за пределами указанного компонента?? И нет необходимости принимать аргумент в фигурных скобках, вы можете просто указать аргументы, как в обычных функциях CalculateTimeSize = (Оставшееся время)

2. Оставшееся время поступает от таймера, поэтому функция знает, что делать. Плохо ли не переименовывать его в функции? Я добавил полный код таймера для дополнительного контекста. Извините за путаницу.

3. Пожалуйста, ознакомьтесь с ответом и скажите, сохраняется ли проблема

4. Даршан, я очень ценю вашу помощь и урок по деструктурированию, однако проблема была не в этом. Честно говоря, я не знаю точно, в чем была проблема, но теперь она работает. Если хотите, посмотрите мой ответ ниже.

Ответ №1:

Вы пытались получить доступ к переменной, которой не было

Это пытается деструктурировать ключ из json. Но при вызове функции передается единственное значение

CalculateTimeSize = ({ Оставшееся время }) => { … }

Измените приведенное выше на это, чтобы вы могли получить доступ к фактическому переданному значению

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

Измените вызов функции с размера шрифта на этот, потому что это может выдавать ошибку uhh. (Поскольку, когда я пытался вызвать функцию с вашего пути в таблице стилей, она выдавала ошибку)

Размер шрифта: {CalculateTimeSize(оставшееся время)},

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

Ответ №2:

Я ненавижу, когда это происходит. Сейчас у меня есть рабочий код, но я не уверен, чем он отличается от того, что у меня было раньше, потому что я пробовал так много разных вещей на этом пути. Я опубликую код ниже, но сначала прокомментирую дополнительные фигурные скобки, которые, казалось, сбивали с толку меня и Даршана.

У меня там были фигурные скобки в первую очередь потому, что они были в примере кода в репозитории GitHub для компонента timer (если вам интересно посмотреть: https://github.com/vydimitrov/react-countdown-circle-timer/tree/master/packages/web#react-countdown-circle-timer). Приведенный ниже код работает с ними на месте, и он не работает без них. Возможно, то, что происходит, на самом деле является деструктурированием, как указал Даршан, но я недостаточно разбираюсь в деструктурировании, чтобы сказать так или иначе. Я действительно считаю, что фигурные скобки имеют какое-то отношение к тому, что 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;
}
Метки: