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

@jazzdle示例效果很好！谢谢你！只需添加一个即可-在keyboardWillShow方法中，可以添加event.endCoordinates.height，因此paddingBottom是与键盘一样的高度。

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

Answer 3

您可以使用flexbox将元素置于底部位置。这是一个简单的例子 -

  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,
  },
});

Answer 4

使用功能组件。这适用于iOS和Android

useEffect(() => {
const keyboardVisibleListener = Keyboard.addListener(
  Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
  handleKeyboardVisible
);
const keyboardHiddenListener = Keyboard.addListener(
  Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
  handleKeyboardHidden
);

return () => {
  keyboardHiddenListener.remove();
  keyboardVisibleListener.remove();
};}, []);


const handleKeyboardVisible = (event) => {
Animated.timing(paddingInput, {
  duration: event.duration,
  toValue: 60,
  useNativeDriver: false,
});};

 const handleKeyboardHidden = (event: any) => {
Animated.timing(paddingInput, {
  duration: event.duration,
  toValue: 0,
  useNativeDriver: false,
});};

Answer 5

自定义挂钩：

import { useRef, useEffect } from 'react';
import { Animated, Keyboard, KeyboardEvent } from 'react-native';

export const useKeyboardHeight = () => {
  const keyboardHeight = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const keyboardWillShow = (e: KeyboardEvent) => {
      Animated.timing(keyboardHeight, {
        duration: e.duration,
        toValue: e.endCoordinates.height,
        useNativeDriver: true,
      }).start();
    };

    const keyboardWillHide = (e: KeyboardEvent) => {
      Animated.timing(keyboardHeight, {
        duration: e.duration,
        toValue: 0,
        useNativeDriver: true,
      }).start();
    };

    const keyboardWillShowSub = Keyboard.addListener(
      'keyboardWillShow',
      keyboardWillShow
    );
    const keyboardWillHideSub = Keyboard.addListener(
      'keyboardWillHide',
      keyboardWillHide
    );

    return () => {
      keyboardWillHideSub.remove();
      keyboardWillShowSub.remove();
    };
  }, [keyboardHeight]);

  return keyboardHeight;
};

React Native Make View＆＃34; Hug＆＃34;键盘的顶部

5 个答案: