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

Posted 2023-03-17

【中文标题】在 react-native 中打开键盘时视图正在上升

【英文标题】：View is rising when keyboard is opened in react-native

【发布时间】：2021-12-17 21:23:32

【问题描述】：

当我打开 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),
  ,
);

【参考方案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();
    ;
  , []);