ネイティブに反応するビューの作成キーボードの上部を「ハグする」

Question

私は画面の下部に絶対配置されたビューを持っているとしましょう。このビューには、テキスト入力が含まれています。テキスト入力がフォーカスされているときは、ビューの一番下がキーボードの上部に触れるようにします。

私はKeyboardAvoidingViewを使いこなしていましたが、キーボードは私の見解を引き継いでいます。絶対的な位置でこの仕事をすることはできませんか？

他にどんな方法がありますか？ありがとう！

Answer 1

数日前、私は同じ問題を抱えている（私は子供の頃のTextInputとの複雑なビューを持っているが）と集中するのTextInputが、「添付」するビュー全体だけでなく、望んでいましたキーボードに接続します。最後に私のために働いているのは次のコードです：

constructor(props) { 
    super(props); 
    this.paddingInput = new Animated.Value(0); 
} 

componentWillMount() { 
    this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); 
    this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); 
} 

componentWillUnmount() { 
    this.keyboardWillShowSub.remove(); 
    this.keyboardWillHideSub.remove(); 
} 

keyboardWillShow = (event) => { 
    Animated.timing(this.paddingInput, { 
     duration: event.duration, 
     toValue: 60, 
    }).start(); 
}; 

keyboardWillHide = (event) => { 
    Animated.timing(this.paddingInput, { 
     duration: event.duration, 
     toValue: 0, 
    }).start(); 
}; 

render() { 
     return (
      <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}> 
       [...] 
       <Animated.View style={{ marginBottom: this.paddingInput }}> 
        <TextTranslateInput /> 
       </Animated.View> 
      </KeyboardAvoidingView> 
     ); 
    } 

ここでは他のビューがあります。

Answer 2

フレックスボックスを使用すると、エレメントの下部位置を指定できます。ここでは簡単な例です -

render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.top}/> 
     <View style={styles.bottom}> 
      <View style={styles.input}> 
      <TextInput/> 
      </View> 
     </View> 
     </View> 
    ); 
    } 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    top: { 
    flex: .8, 
    }, 
    bottom: { 
    flex: .2, 
    }, 
    input: { 
    width: 200, 
    }, 
});