如何在用户长时间输入后自动多行化TextInput值?

问题描述 投票:0回答:1

screenshot

我目前开始使用一个简单的计算器,并了解React-native的基础知识,但我发现自己陷入困境。我研究过adjustsFontSizeToFit目前无法用于android,我希望我的TextInput显示用户从头到尾输入的所有数字(正如你在屏幕截图中看到的那样,只能看到12个数字,但我放了超过12个数字)

注意:请忽略屏幕截图中的按钮,因为我还没有解决更多相关问题

代码:

YEARS

  <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-native react-native-android
1个回答
0
投票

问题是你给了keyboardType="numeric"

keyboardType不适用于多行

尝试省略keyboardType

© www.soinside.com 2019 - 2024. All rights reserved.