如何阻止React Native中绝对定位元素随键盘上移

我有一个包含代码编辑器和折叠式实时预览的容器，代码结构如下：

<View style={style.editorWithLivePreview}>
  {
    questionObject
    && <CodeEditorsTab.Navigator>
      {
        Object.keys(questionObject.questionSetup.files)
          .map((filePath, idx) => {
            const { files } = memorizedWebkataQuestionState.questionObject.questionSetup;
            const { name } = files[filePath];
            return <CodeEditorsTab.Screen name={`${name}Tab`} key={idx} options={{ tabBarLabel: name }}>
              {(props) => <CodeEditor {...props}
                codeEditorWebViewRef={(el) => {
                  codeEditorsRefs.current[name] = el;
                }}
                style={style}
                onload={onCodeEditorLoad}
                styleStringForDocumentInsideWebView={styleStringForDocumentInsideWebView}
                onCodeEditorChanged={(code) => onCodeEditorChange(name, code)}
              />}
            </CodeEditorsTab.Screen>;
          })
      }
    </CodeEditorsTab.Navigator>
  }
  <View style={[style.containerWithRevealerBtn, {
    height: orientation === 'PORTRAIT' ? Dimensions.get('window').height - 130 : Dimensions.get('window').height - 105,
    transform:
      [{ translateX: livePreviewOpen ? 0 : Dimensions.get('window').width - 50 }],
    zIndex: livePreviewOpen ? 1 : undefined,
  }]}>
    <RevealerButton
      style={style}
      revealed={livePreviewOpen}
      toggleReveal={() => {
        setLocalState((prev) => ({
          ...prev,
          livePreviewOpen: !prev.livePreviewOpen,
        }));
      }}
    />
    <View style={style.container}>
      <SecondaryTabBar
        style={style}
        activeTab={secondaryActiveTab}
        changeTab={(tabToSet) => {
          setSecondaryActiveTab(tabToSet);
        }}
      />
      {
        secondaryActiveTab === 'livePreview'
        && <LivePreview
          style={style}
          livePreviewWebViewRef={livePreviewWebViewRef}
          codeState={codeState}
          onMessageFromLivePreviewWebView={onMessageFromLivePreviewWebView}
        />
      }
      {
        secondaryActiveTab === 'validatedResult'
        && <ValidatedResult
          style={style}
          evaluationDetails={evaluationDetails}
        />
      }
    </View>
  </View>
</View>

相关样式代码：

const style = {
  editorWithLivePreview: {
    flex:1,
    position:'relative',
  },
containerWithRevealerBtn: {
 flex: 1,
 position: 'absolute',
 width: '100%',
 bottom: 0,
 flexDirection: 'row',
 },
}

实时预览容器（containerWithRevealerBtn）相对于editorWithLivePreview绝对定位。当键盘弹出时，该实时预览容器会随之上移，需要阻止这个现象。

方案1：修改AndroidManifest窗口软键盘模式（仅Android） #

在Android项目的AndroidManifest.xml中找到对应Activity，调整软键盘模式：

<activity
    android:name=".MainActivity"
    android:windowSoftInputMode="adjustNothing">
    <!-- 其他配置内容 -->
</activity>

• adjustNothing：键盘弹出时系统不会调整任何布局，容器位置保持固定
• 若需要保留界面平移避免焦点被遮挡，可改用android:windowSoftInputMode="adjustPan"

方案2：固定实时预览容器的屏幕级定位 #

修改containerWithRevealerBtn的样式，让它基于屏幕而非父容器绝对定位：

containerWithRevealerBtn: {
 flex: 1,
 position: 'absolute',
 width: '100%',
 bottom: 0,
 flexDirection: 'row',
 // 添加以下属性锁定屏幕位置
 left: 0,
 right: 0,
 // 移除flex属性，避免受父容器布局变化影响
 flex: undefined,
},

同时确保父容器editorWithLivePreview的布局不会因键盘调整而改变，可配合方案1的配置使用。

方案3：监听键盘事件强制固定位置 #

通过React Native的Keyboard模块监听键盘状态，实时修正容器位置：

import { Keyboard } from 'react-native';

useEffect(() => {
  const handleKeyboardShow = () => {
    // 键盘弹出时强制设置bottom为0
    setLocalState(prev => ({...prev, previewBottom: 0}));
  };

  const keyboardShowListener = Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
  const keyboardHideListener = Keyboard.addListener('keyboardDidHide', handleKeyboardShow);

  return () => {
    keyboardShowListener.remove();
    keyboardHideListener.remove();
  };
}, []);

// 在实时预览容器中应用状态
<View style={[style.containerWithRevealerBtn, {
  // 其他样式
  bottom: localState.previewBottom,
}]}>

核心原因 #

键盘弹出时React Native默认会触发adjustResize模式，导致父容器editorWithLivePreview高度收缩，绝对定位的子容器会随父容器底部上移。通过禁用布局调整、锁定屏幕定位或强制修正位置，即可阻止实时预览容器的上移行为。

内容的提问来源于stack exchange，提问作者Sai Darshan