时间戳

首页 > 解决方案 > 如何在用户长时间输入后自动多行 TextInput 值？

react-native - 如何在用户长时间输入后自动多行 TextInput 值？

问题描述

截屏

我目前从一个简单的计算器开始，了解 React-native 的基础知识，但我发现自己陷入了困境。我研究了adjustsFontSizeToFit目前不可用的android，我希望我TextInput显示用户从头到尾输入的所有数字（如您在屏幕截图中看到的，只能看到 12 个数字，但我在那里放置了超过 12 个数字）

注意：请忽略屏幕截图中的按钮，因为我还没有解决更多关于它的问题

代码 ：

ANS

  <View style = {{flex: 1, flexDirection: 'row', alignItems: 'flex-start'} }>
    <TextInput 
    style = {one.inputText1}
    placeholder = {" Please input \n the first \n number  here."}
    placeholderTextColor = '#66FCF1'
    onChangeText = { this.handleChangedText }
    keyboardType = 'numeric'
    > 
    </TextInput>

    <TextInput
     style = {one.inputText2}
     placeholder = { "Please input \n the second \n number  here." }
     placeholderTextColor = '#EDF5E1'
     onChangeText = { this.handleChangedText2 }
     keyboardType = 'numeric'
    >  
    </TextInput>
  </View>

风格 ：

 const one = StyleSheet.create({

 txtDefault: {
 flex: 0.2, 
 backgroundColor: 'white', 
 alignItems: 'center', 
 justifyContent:'center', 
 fontSize: 30, 
 textAlign: 'center',
 textAlignVertical: 'center',
 borderColor: 'black',
 borderWidth: 1,
 fontWeight: 'bold',
 color: '#242582',

 },

 inputText1: {
 backgroundColor: '#0B0C10', 
 alignItems: 'center', 
 justifyContent:'center', 
 fontSize: 30, 
 textAlign: 'center',
 textAlignVertical: 'center',
 width: 210,
 height: 570,
 fontWeight: 'bold',
 color: '#66FCF1',
 },

 inputText2: {
 backgroundColor: '#1F2833',  
 alignItems: 'center', 
 justifyContent:'center', 
 fontSize: 30, 
 textAlign: 'center',
 textAlignVertical: 'center',
 width: 210,
 height: 570,
 fontWeight: 'bold',
 color: '#45A29E',
 },

标签： react-nativereact-native-android

解决方案

问题是你给了keyboardType="numeric"

键盘类型不适用于多行

尝试省略键盘类型

推荐阅读