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'
}})

Answer 1

将每个输入用作组件。尝试这样的事情：

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

这可以解决问题

Answer 2

出于某种原因，将multiline={true}设置为TextInput为我工作。

不完全确定原因。更奇怪的是，如果您还有keyboardType='numeric'，它将无效。

Answer 3

尝试调整输入的height。我真的不明白为什么，但是它解决了我的问题。

Answer 4

设置

<ScrollView keyboardShouldPersistTaps="always"

结合下面的textInout组件（我为文本输入创建的自定义组件来解决此问题）解决了我的问题： <ScrollView keyboardShouldPersistTaps="always"

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

更新

更好的表达可能是：

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

，然后是上面针对TextInput组件的表达式。因为在上一个表达式中，当您按回车键并隐藏键盘时，如果再次单击该输入，则键盘不会打开，因为该输入已经聚焦。所以您需要先模糊然后再聚焦。

这是我的主意，也许您可以采用更具创意的方式来执行此操作：）

如果您使用我的表情，请别忘了从'react-native'导入Keyboard。

反应本机滚动视图不会从文本输入内部滚动

4 个答案: