在 react-native 中打开键盘时视图正在上升

Question

当我打开 textInput 键盘时出现问题，底部的视图会像这样升起 我使用了KeyboardAvoidingView，但我仍然遇到同样的问题

这是我的实现：

<KeyboardAvoidingView
      behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
      style={{flex: 1, padding: wp(3.2)}}>
      <Design2 position="absolute" bottom={hp(0)} />
      <Design4 position="absolute" bottom={hp(0)} left={wp(25)} />
      <Text
        style={[
          Typography.darkTitle,
          {color: theme.textColor2},
          {marginVertical: hp(2.4)},
        ]}>
        {getMessageByKey('menu.title')}
      </Text>
      <Text style={[Typography.descriptionTextSmaller]}>
        {getMessageByKey('menu.change')}
      </Text>
      <View style={styles.menuImageContainer}>
        {menuImage ? (
          <FastImage style={styles.image} source={{uri: menuImage.uri}} />
        ) : (
          <FastImage
            style={{width: wp(38), height: wp(38)}}
            source={{uri: `${config.SERVER_URL}/menus/menu1.png`}}
          />
        )}
        <TouchableOpacity
          style={styles.plusIcon}
          onPress={() => setMenuModalVisible(true)}>
          <PlusOrange />
        </TouchableOpacity>
      </View>

      <View style={{justifyContent: 'center'}}>
        <Input
          placeholder={getMessageByKey('menu.menu_name')}
          value={menuName}
          onChangeText={(text) => {
            handleMenuNameChange(text);
          }}
        />
        {menuNameError && (
          <Text style={styles.menuNameError}>{menuNameError}</Text>
        )}
      </View>

      <RightArrow
        svg={isRTL() ? ArrowLeftWhite : WhiteRightArrow}
        onPress={onSubmit}
        style={[styles.rightButton]}
      />

      <MenuImageModal
        onChange={handleChange}
        isVisible={menuModalVisible}
        dismiss={() => {
          setMenuModalVisible(false);
        }}
      />
    </KeyboardAvoidingView>

风格：

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: wp(3.2),
    marginTop: isIphoneX() ? hp(3) : 0,
  },
  avatarContent: {
    flex: 1,
  },
  menuImageContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: hp(10.46),
  },
  modalContent: {
    backgroundColor: Colors.white,
    position: 'absolute',
    width: wp(100),
    height: hp(49),
    bottom: wp(-5),
    left: wp(-5),

    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    paddingBottom: wp(1),
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    height: hp(6),
    marginVertical: hp(0.3),
  },
  cameraIcon: {
    backgroundColor: Colors.red,
    width: wp(10),
    height: wp(10),
    borderRadius: 180,
    justifyContent: 'center',
    alignItems: 'center',

    marginRight: wp(4),
  },
  icon: {
    width: wp(10),
    height: wp(10),
  },
  image: {
    width: wp(38),
    height: wp(38),
    borderRadius: 360,
    alignSelf: 'center',
    justifyContent: 'center',
    backgroundColor: '#F8F8F8',
  },
  plusIcon: {
    marginLeft: hp(13),
    bottom: hp(6),
    height: hp(5),
    width: hp(5),
  },
  viewSuggestions: {
    position: 'absolute',
    top: hp(4.8),
    left: wp(55),
    zIndex: 999,
  },
  suggestionsTitle: {
    ...Typography.darkTitle,
    textAlign: 'center',
    marginBottom: hp(4),
    marginTop: hp(3),
  },
  suggestionsText: {
    ...Typography.descriptionText,
    color: 'black',
  },
  rightButton: {
    backgroundColor: Colors.orange,
    shadowColor: Colors.salmonOrange,
    right: wp(3),
    bottom: hp(7.0),
  },
  menuNameError: {
    ...Typography.inputErrorText,
    left: wp(1),
  },
});

Answer 1

这可能不是最好的解决方案，但应该可以。 您可以使用它来获取键盘的高度，更改顶部 div 的高度，然后通过查看键盘是否向上来动态执行此操作。

获取键盘高度

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

export const useKeyboard = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  function onKeyboardDidShow(e: KeyboardEvent) {
    setKeyboardHeight(e.endCoordinates.height);
  }

  function onKeyboardDidHide() {
    setKeyboardHeight(0);
  }

  useEffect(() => {
    Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
    Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);
    return () => {
      Keyboard.removeListener('keyboardDidShow', onKeyboardDidShow);
      Keyboard.removeListener('keyboardDidHide', onKeyboardDidHide);
    };
  }, []);

  return keyboardHeight;
};

告诉你键盘是否启动

const [isKeyboardVisible, setKeyboardVisible] = useState(false);

 useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        setKeyboardVisible(true); // or some other action
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardVisible(false); // or some other action
      }
    );

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);