Javascript 反应本机生成视图”；拥抱；键盘的顶部

假设我有一个绝对位于屏幕底部的视图。此视图包含文本输入。当文本输入聚焦时，我希望视图的底部接触键盘的顶部

我一直在摆弄键盘AvoidingView，但键盘一直在我的视图上。不可能用绝对位置进行此操作吗

---

我还可以试试别的方法吗？谢谢

您可以使用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,
  },
});

render（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
顶部：{
弹性体：.8，
},
底部：{
弹性体：.2，
},
输入：{
宽度：200，
},
});

几天前，我也遇到了同样的问题（尽管我小时候对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>
        );
    }

构造函数（道具）{
超级（道具）；
this.paddingInput=新的动画.Value（0）；
}
组件willmount（）{
this.keyboardWillShowSub=Keyboard.addListener（'keyboardWillShow'，this.keyboardWillShow）；
this.keyboardWillHideSub=Keyboard.addListener（'keyboardWillHide'，this.keyboardWillHide）；
}
组件将卸载（）{
此.keyboard将显示sub.remove（）；
此.keyboard将隐藏sub.remove（）；
}
键盘将显示=（事件）=>{
动画。计时（此。paddingput{
持续时间：event.duration，
toValue:60，
}).start（）；
};
键盘willhide=（事件）=>{
动画。计时（此。paddingput{
持续时间：event.duration，
toValue:0，
}).start（）；
};
render（）{
返回(
[...]
);
}

---

您还有其他视图。

@jazzdle示例非常有用！谢谢你！ 只需一次添加-在

键盘将显示

方法中，可以添加

event.endCoordinates.height

，因此填充底部的高度与键盘的高度完全相同

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

---

使用功能组件。这适用于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,
});};

自定义挂钩：

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

---

我很高兴听到：）可以证实，这是一个非常巧妙的解决方案。感谢您花时间发布这篇文章！谢谢你！仅供其他安卓建筑参考，使用keyboardWillShow和keyboardDidShow有一些限制。如果您是为Android构建的，请务必注意它们：如果您这样做，您必须从键盘上删除behavior='padding'，AvoidgView不需要使用键盘AvoidgView。你可以有一个绝对位置的视图，只需修改/设置其底部值的动画。如果你的应用程序不是完整的屏幕，可以使用

position:absolute

和

bottom:0

！谢谢