自动缩小文本 - React Native答案

【问题标题】：Auto shrink text - React Native自动缩小文本 - React Native
【发布时间】：2021-11-29 14:31:59
【问题描述】：

我是 React Native 的新手。正如您在照片中看到的，有 1 个文本输入和 1 个显示输入文本的框。我的字体大小是 14。当我写到输入端的文本在板上占用太多空间时，我希望减小我的字体大小。所以我不希望任何文本被遗漏。当文本准备好开箱即用时，我希望文本自动缩小。我该怎么做？

我的代码：

import React, { useState } from 'react'
import { Text, View, TextInput, StyleSheet } from 'react-native'



const Test = () => {

    const [text, setText] = useState('')

    return (
        <View style={styles.container}>
            <View style={styles.board}>
                <Text style={styles.text}>
                    {text}
                </Text>
            </View>
            <View style={styles.input}>
                <TextInput
                    onChangeText={setText}
                />
            </View>
        </View>
    )
}

export default Test

const styles = StyleSheet.create({
    container:{ 
        backgroundColor: 'purple', 
        flex: 1, 
        justifyContent: 'center', 
        alignItems: 'center' 
    },
    board:{
        height: 50, 
        width: 100, 
        backgroundColor: 'grey', 
        marginBottom: 20
    },
    input:{
        height: 50, 
        width: 100, 
        backgroundColor: 'white' 
    },
    text:{
        fontSize:14
    }
})

【问题讨论】：

你可能可以在你的风格中把它变成一个 if ： text:{ fontSize: text.length

标签： javascript react-native

【解决方案1】：

您可以使用这种方法 - https://snack.expo.dev/IFjJfnj6y ，要获取当前文本的大小，您也可以使用此链接 - React-native view auto width by text inside

【讨论】：