React-Native：键盘显示和隐藏侦听器不起作用

问题描述

嗨，我试图在键盘的显示和隐藏事件上调用某些函数，我从react-native文档中复制了确切的代码，但是我不知道为什么它不起作用！ 这是我的组件：

import React,{ useEffect } from 'react';
import { StyleSheet,View,TouchableOpacity,Image,TextInput,Platform,KeyboardAvoidingView,Keyboard } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { deviceScreenDimensions } from '../../helpers/functions/common';

const CameraCapturedBody = ({
  caption,capturedPhotoPath,onUploadClick,onCaptionChange,isLoading
}) => {
  const _keyboardDidShow = () => {
    console.log("Keyboard Shown");
  };

  const _keyboardDidHide = () => {
    console.log("Keyboard Hidden");
  };

  useEffect(() => {
    Keyboard.addListener("keyboardDidShow",_keyboardDidShow);
    Keyboard.addListener("keyboardDidHide",_keyboardDidHide);

    // cleanup function
    return () => {
      Keyboard.removeListener("keyboardDidShow",_keyboardDidShow);
      Keyboard.removeListener("keyboardDidHide",_keyboardDidHide);
    };
  },[]);

  const photoPath = Platform.OS === 'android' ? capturedPhotoPath : capturedPhotoPath.substring(7);

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      style={{ flex: 1 }}
    >
      <View style={styles.preview}>
        <Image source={{ uri: photoPath,isstatic: true }} style={styles.capturedImage} />
        <View style={styles.captionInputContainer}>
          <TextInput
            autoCapitalize="none"
            placeholder="Enter a caption"
            value={caption}
            onChangeText={onCaptionChange}
            style={styles.textInput}
            placeholderTextColor="white"
            underlineColorAndroid="white"
          />
          <TouchableOpacity style={styles.capture} onPress={onUploadClick} disabled={isLoading}>
            <Icon name="upload" color="#fff" size={45} />
          </TouchableOpacity>
        </View>
      </View>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  preview: {
    flex: 1,justifyContent: 'flex-start',alignItems: 'center',flexDirection: 'column',width: '100%'
  },capturedImage: {
    height: '100%',textInput: {
    width: '80%',color: 'white'
  },capture: {
    paddingHorizontal: 10
  },captionInputContainer: {
    position: 'absolute',bottom: 0,alignSelf: 'flex-end',backgroundColor: 'rgba( 0,0.5)',flexDirection: 'row',width: deviceScreenDimensions.width,paddingVertical: 15,paddingLeft: 10,height: 80
  }
});

export default CameraCapturedBody;

请告诉我是否必须将事件侦听器放置在其他任何地方或进行其他更改。预先感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）