React Native WebView无法显示完整高度，保留padding时如何解决底部截断？

问题背景 #

我尝试通过WebView渲染网页的完整高度，但底部一小部分内容被截断。排查后发现是mainview中的paddingHorizontal属性导致的，移除该padding后网页能完整显示，但我不能删除这个padding，请问该如何解决？

附相关代码：

return (
    <SafeAreaView style={{}}>
      <TopBar navigation={navigation} isHome={true} />
      <ScrollView contentContainerStyle={{}}>
        <Text> dsdsdsdsddss </Text>
        <View style={{height:200}}></View>
        <View style={styles.mainview}>
          <View style={styles.container}>
            <WebView
              contentInset={{bottom: 20}}
              bounces={false}
              style={{height: webViewHeight}}
              onMessage={onWebViewMessage}
              scrollEnabled={false}
              source={{
                uri: url,
              }}
              onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
              injectedJavaScript={`
        const height = Math.max(document.documentElement.clientHeight, document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight);
        window.ReactNativeWebView.postMessage(height.toString());
      `}></WebView>
     
          </View>
          <View style={{height:200, backgroundColor:"red"}}></View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  mainview: {
    paddingHorizontal: 16, //This padding is causing the issue
    paddingVertical: 24,
    flex: 1,
  },
  container: {
    backgroundColor: COLORS.white,
    borderRadius: 4,
    elevation: 5,
    shadowColor: COLORS.black,
    shadowOffset: {
      height: 4,
      width: 0,
    },
    shadowOpacity: 0.07,
    shadowRadius: 15,
  },
});

解决方案1：强制网页适配容器宽度后计算高度 #

问题核心是网页未适配mainview的左右padding带来的容器宽度收缩，导致计算的高度是基于全屏宽度的，实际内容换行后高度超出了预设值。通过注入JS先让网页适配容器宽度，再计算真实高度：

修改WebView的injectedJavaScript部分：

injectedJavaScript={`
// 强制网页宽度匹配容器，清除默认边距避免溢出
document.body.style.width = '100%';
document.body.style.margin = '0';
document.body.style.padding = '0';

// 确保viewport适配移动端，避免缩放问题
if (!document.querySelector('meta[name="viewport"]')) {
  const meta = document.createElement('meta');
  meta.name = 'viewport';
  meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
  document.head.appendChild(meta);
}

// 计算网页真实高度
const height = Math.max(
  document.documentElement.clientHeight,
  document.body.scrollHeight,
  document.documentElement.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.offsetHeight
);
window.ReactNativeWebView.postMessage(height.toString());
`}

解决方案2：转移padding到内部元素，隔离布局影响 #

如果不想修改网页渲染逻辑，可以将mainview的paddingHorizontal转移到内部子元素的marginHorizontal，既保留整体布局的间距，又避免padding影响WebView的宽度计算：

1. 修改样式表：

const styles = StyleSheet.create({
  mainview: {
    // 移除paddingHorizontal，保留垂直方向padding
    paddingVertical: 24,
    flex: 1,
  },
  container: {
    backgroundColor: COLORS.white,
    borderRadius: 4,
    elevation: 5,
    shadowColor: COLORS.black,
    shadowOffset: {
      height: 4,
      width: 0,
    },
    shadowOpacity: 0.07,
    shadowRadius: 15,
    // 用marginHorizontal替代原mainview的paddingHorizontal
    marginHorizontal: 16,
  },
  redView: {
    height: 200,
    backgroundColor: "red",
    // 给红色View也添加相同的水平margin，保持布局一致
    marginHorizontal: 16,
    marginTop: 20 // 可选，维持和原布局一致的垂直间距
  },
});

2. 更新JSX中的红色View：

<View style={styles.redView}></View>

解决方案3：手动计算WebView可用宽度并告知网页 #

通过Dimensions获取屏幕宽度，计算出WebView的可用宽度（屏幕宽度减去2倍的paddingHorizontal），再通过注入JS让网页基于该宽度渲染：

1. 导入并计算可用宽度：

import { Dimensions } from 'react-native';

const { width: screenWidth } = Dimensions.get('window');
// 减去2*16的paddingHorizontal
const webViewAvailableWidth = screenWidth - 32;

2. 修改注入的JavaScript：

injectedJavaScript={`
// 强制网页宽度为计算好的可用宽度
document.body.style.width = '${webViewAvailableWidth}px';

// 计算真实高度
const height = Math.max(
  document.documentElement.clientHeight,
  document.body.scrollHeight,
  document.documentElement.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.offsetHeight
);
window.ReactNativeWebView.postMessage(height.toString());
`}

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