javascript - Auto shrink text - React Native
问题描述
I'm new to React native. As you can see in the photo, there is 1 text input and 1 box showing the typed text. My font size is 14. I want my font size to be reduced when the text I write to the input takes up too much space on the board. So I don't want any text left out of the box. I want the text to shrink automatically when the text is ready to go out of the box. How can i do that?
My codes:
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
}
})
解决方案
你可以使用这种方法 - https://snack.expo.dev/IFjJfnj6y,为了获取当前文本的大小,你也可以使用这个链接 - React-native view auto width by text inside
推荐阅读
- c# - 如何嵌入 app.config 并对其 Web 服务端点进行硬编码?
- python - 更新表语句在 pandasql 中不起作用
- javascript - 如何根据其他变量的结果设置变量名
- java - 打印出一个数字塔
- php - 如何通过 Timber 为 Twig 制作自定义逃生器?
- node.js - 静态解析符号值时遇到 ANGULAR 错误
- rxjs - 将 catchError 与 RxFire firestore collectionData 一起使用时遇到问题
- java - 领域数据库不写入数据
- java - 如何让 HttpClient 返回状态码?
- matlab - 从Matlab中的矩阵中提取每个地区的数据