React-native如何在文本輸入上移動屏幕

Question

我有一個使用react-native創建的登錄屏幕。

如何在用戶輸入textInput時將屏幕向上移動？

我是否在聽onFocus（）事件並使用css樣式來更改視圖的樣式？

Answer 1

您可以使用ScrollView來控制屏幕的上下移動。只要用戶沒有關注任何TextInput，您可以disable scroll。關注焦點時，只需使用Content Offset支撐向上移動滾動視圖即可。

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

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

希望它有幫助！

Answer 2

夜煞的答案是相當不錯的，雖然不會與滾動型的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

這是一個廢話拍攝得到的滾動型工作的原生鍵盤意識的功能。對於我的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/>是它是在我的情況下，屏幕的底部，這可能只是工作。