React Native滚动视图在文本输入框内无法滚动。

Question

我在滚动视图中添加了多个文本输入框。问题是当我想从文本输入框内向下滚动时，我把手指放在文本输入框内并向下滚动，但它不会滚动整个页面，有没有办法解决这个问题？以下是样例代码：

export default class ScrollViewWithTextInput extends React.Component {
render() {
    <ScrollView>
        <TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        />
        <TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        /><TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        /><TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        />
        <TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        />
        <TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        /><TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        /><TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        />
    </ScrollView>
}}
const styles = StyleSheet.create({
Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 8
},
input: {
    width: 350,
    height: 100,
    margin: 5,
    borderColor: 'black',
    borderWidth: 2,
    textAlign: 'right'
}})

- erfan yousefifar

---

我们可能需要看一下你的代码。 - Eduard

我添加了一个示例代码，奇怪的是，当我将textAlign设置为“left”时，它可以工作，但在“center”或“right”时无法工作。 - erfan yousefifar

1. 当文本对齐方式为右对齐或居中时，整个输入框都被视为“填充了文本”，但默认的“左对齐”位置下，TextInput 仅将文本视为我们所见到的部分。
2. 我在 iOS 上检查了您的应用程序，滚动正常。
3. 您的代码中缺少返回语句。

- Eduard

问题出现在Android上，如果我移除textAlign和placeholder，它就能正常工作。如果存在placeholder，我需要滚动两次才能使其正常工作。我认为这是一个非常烦人的错误。顺便说一下，谢谢你的帮助。 - erfan yousefifar

另外一件事，无论textAlign是否设置，当我使用从右到左的语言时，问题仍然存在。 - erfan yousefifar

如果你认为这是一个bug，你可以在GitHub页面的issues部分向react-native团队报告问题，以便问题得到修复。 - Eduard

Answer 1

由于某种原因，将 multiline={true} 设为 TextInput 对我起了作用。 不太确定为什么。更奇怪的是，如果您同时拥有 keyboardType='numeric'，它将无法工作。

- Dror Bar

Answer 2

将每个输入作为组件使用。尝试像这样：

<TouchableOpacity onPress={()=>this.input.focus()} >
    <View pointerEvents="none" >
        <TextInput ref = {(input) => this.input = input} />
    </View>
</TouchableOpacity>

这会有所帮助。

- Nagibaba

Answer 3

尝试调整输入框的高度。 我不是很明白为什么，但这解决了我的问题。

- froston

Answer 4

设置

<ScrollView keyboardShouldPersistTaps="always"

与下面的文本输入组件（我为解决这个问题创建的自定义组件）结合使用解决了我的问题：

<TouchableOpacity
         activeOpacity={1}
         onPress={()=>this.input.focus()}>
         <View
               pointerEvents="none">
               <TextInput
                  ref = {(input) => this.input = input}
               />
         </View>
    </TouchableOpacity>

更新

更好的表达可能是：

constructor(props) {
    super(props);
    this._keyboardDidHide = this._keyboardDidHide.bind(this)
    this.onSubmitEditing = this.onSubmitEditing.bind(this)
}

componentWillMount () {
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide)
};
componentWillUnmount () {
    this.keyboardDidHideListener.remove();
}
_keyboardDidHide(){
    this.input.blur()
}

然后在TextInput组件上方加入上述表达式。因为在之前的表达式中，当你按下back键以隐藏键盘后，再次点击该输入框时，键盘不会打开，因为输入框已经聚焦。所以你需要先取消聚焦，然后再次聚焦。

这是我的想法，也许你可以用更有创意的方式来实现 :)

顺便提醒一下，如果你使用我的表达式，请不要忘记从'react-native'导入Keyboard。

- Mahdieh Shavandi

Answer 5

我不知道为什么，但在我的情况下，将TextInput替换为styledComponent，并将其用作TextInput有所帮助。

import styled from 'styled-components/native';

export const StyledInput = styled.TextInput``

- powook