React-native 如何在文本输入上向上移动屏幕

Question

我有一个使用 react-native 创建的登录屏幕。

如何在用户输入 textInput 时向上移动屏幕？

是否监听 onFocus() 事件并使用 css 样式来更改视图的样式？

Answer 1

您可以使用 ScrollView to control screen up and down movements. As long as user hasn't focused any TextInput, you can disable scroll. On focus, just shift up the scrollview using Content Offset 道具。

<TextInput
    onFocus={this.textInputFocused.bind(this)}
  />

textInputFocused() {
//do your stuff here. scroll screen up
}

希望对您有所帮助！

Answer 2

Night Fury 的回答非常好，虽然不会对 ScrollView 的 contentOffset 大惊小怪，但我会使用 ScrollResponder:

render() {
  return (
    <ScrollView ref="myScrollView">
      <TextInput
        ref="myInput"
        onFocus={this._scrollToInput.bind(this)}
      />
    </ScrollView>
  );
}

_scrollToInput {
  const scrollResponder = this.refs.myScrollView.getScrollResponder();
  const inputHandle = React.findNodeHandle(this.refs.myInput)

  scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
    inputHandle, // The TextInput node handle
    0, // The scroll view's bottom "contentInset" (default 0)
    true // Prevent negative scrolling
  );
}

见方法定义：scrollResponderScrollNativeHandleToKeyboard

Answer 3

还有另一个解决方案，使用 RN 0.2，这次不是压缩它滚动的内容。

 inputFocused: function(ref) {
   this._scroll(ref, 75);
 },

 inputBlurred: function(ref) {
   this._scroll(ref, 0);
 },

 _scroll: function(ref, offset) {
   setTimeout(() => {
     var scrollResponder = this.refs.myScrollView.getScrollResponder();
     scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
                React.findNodeHandle(this.refs[ref]),
                offset,
                true
            );
     });
  },

...

render: function() {
  return <View style={{flex: 1}}> 
    <ScrollView ref="myScrollView" keyboardDismissMode='interactive' contentContainerStyle={{flex: 1}}>
      <TextInput
        ref="myInput"
        onFocus={this.inputFocused.bind(this, 'myInput')}
        onBlur={this.inputBlurred.bind(this, 'myInput')} />
    </ScrollView>
  </View>
}

Answer 4

这 package 做得很好，引入了 KeyboardAwareScrollView 组件，该组件向上滚动视图以匹配键盘输入，然后向下滚动。

Answer 5

2017 年 (RN 0.43) 有一个特殊的组件：KeyboardAvoidingView

Answer 6

要使 ScrollView 的本机键盘感知功能正常工作，这是一个废话。对于我的 Android 应用程序，它在一个屏幕上完美运行，而另一个屏幕几乎完全相同，但无法正常运行。而在 iOS 上，它就是行不通。这对我有用：

import { Keyboard, ScrollView, StyleSheet, View } from 'react-native';

this.state = {
    filler: false,
}

componentWillMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
}

componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
}

_keyboardDidShow() {
    this.setState({filler: true})
    setTimeout(() => this.vertical && this.vertical.scrollToEnd({animated: true}), 0);
}

_keyboardDidHide() {
    this.setState({filler: false})
}


...
return (
  <ScrollView ref={ref => this.vertical = ref}>
    <TextInput/>
    { this.state.filler ? <View style={styles.filler}/> : null }
  </ScrollView>
)

styles.filler = {
    height: 'Keyboard Height'
}

注意：这可能只有当您的 <TextInput/> 位于屏幕底部时才有效，我的情况就是如此。

Answer 7

import {KeyboardAvoidingView} from 'react-native';

<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>

    <Text style={{height: 100, marginTop: 30}}> test text before input</Text>
    <Text style={{height: 100, marginTop: 30}}> test text before input</Text>
    <Text style={{height: 100, marginTop: 30}}> test text before input</Text>
    <Text style={{height: 100, marginTop: 30}}> test text before input</Text>
    <Text style={{height: 100, marginTop: 30}}> test text before input</Text>

    <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
    />

    <Text style={{height: 100, marginTop: 20}}>1 test text after input</Text>
    <Text style={{height: 100, marginTop: 20}}>2 test text after input</Text>
    <Text style={{height: 100, marginTop: 20}}>3 test text after input</Text>
    <Text style={{height: 100, marginTop: 20}}>4 test text after input</Text>
    <Text style={{height: 100, marginTop: 20}}>5 test text after input</Text>

</KeyboardAvoidingView>

运行在零食中： https://snack.expo.io/H1BE5ZoXV

React-native 如何在文本输入上向上移动屏幕

React-native how to move screen up on textinput

javascript

reactjs

react-native