React Native Android - 如何能够滚动 TextInput

Posted 2023-04-18

【中文标题】React Native Android - 如何能够滚动 TextInput

【英文标题】：React Native Android - How to be able to Scroll through TextInput

【发布时间】：2018-06-25 23:48:04

【问题描述】：

我正在创建一个表单，它的样式在左侧有标签，在右侧有 TextInputs 作为要求。所以我遇到的问题是当你以某种方式触摸 TextInput 时滚动是不可能的。大多数用户使用右侧滚动，所以这对我来说是一个主要问题。你有什么想法可以解决这个问题吗？

样式的示例代码以防万一或者人们可以找到有用的东西

<View style= flexDirection: 'row', marginTop: 10, justifyContent: 'center', alignItems: 'center'  >
                        <View style= justifyContent: 'center', alignSelf: 'center', alignItems: 'center', width: W, height: HEIGHT / 18, borderWidth: 1 >
                            <Text adjustsFontSizeToFit
                                style= textAlign: 'center', color: 'black',  >
                                Telefon Numarası
                            </Text>
                        </View>
                        <TextInput
                            ref=(node) =>  this.phoneNumber = node; 
                            dataDetectorTypes=['phoneNumber']
                            blurOnSubmit=false
                            keyboardType='phone-pad'
                           
                            defaultValue=this.props.data.plateInformation != null ? this.props.data.plateInformation.phoneNumber : ''
                            returnKeyType='go'
                            onChangeText=this.props.changePhoneNumber
                            keyboardAppearance='dark'
                            returnKeyLabel='Devam'
                            onSubmitEditing=() => this.carBrand.focus()
                            style= color: 'green', textAlign: 'center', borderWidth: 1, width: W, height: HEIGHT / 18, margin: 'auto' 
                        />
                    </View>

【问题讨论】：

这是android平台的问题。您可以通过以下链接跟踪此问题：github.com/facebook/react-native/issues/16206github.com/facebook/react-native/issues/12167

【参考方案1】：

出于某种原因，这对我有用：multiline=true。

不完全确定为什么。 更奇怪的是，如果你也有keyboardType='numeric'，它将无法正常工作。

【讨论】：

是的，我在我的实现中做了同样的事情。感谢您的回答，但我不会将其标记为答案，因此有人可以推动完全有效的解决方案。

【参考方案2】：

试试这个，在 TextInput 中添加以下 props

<TextInput
  ...
  maxHeight=<your height>
  autoGrow= false  />

【讨论】：

感谢您的回答，但 TextInput 似乎没有您在答案中列出的那些道具。你能说得更具体些吗？

参考这个链接facebook.github.io/react-native/docs/0.50/textinput.htmlTextInput 有所有的道具。确保您使用的是最新的 RN 版本

我检查了我的 React Native 版本，即 0.50.4 。我的 TextInput 上怎么可能没有这些道具？我会想办法的。

我已经升级了我的 React，但我的 TextInput 似乎在 0.52.0 版本中仍然没有这些道具。听起来很奇怪。