React Native中BottomSheet内WebView无法显示问题求助

我的代码里<Text>Awesome 🎉</Text>能正常显示，但BottomSheet内的WebView却无法展示，完整代码如下：

import React, { useCallback, useMemo, useRef } from "react";
import { View, Text, StyleSheet } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
import WebView from "react-native-webview";

const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log("handleSheetChanges", index);
  }, []);

  // renders
  return (
    <GestureHandlerRootView style={styles.container}>
      <BottomSheet ref={bottomSheetRef} onChange={handleSheetChanges}>
        <BottomSheetView style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
          <WebView
            style={{ flex: 1 }}
            source={{
              uri: "https://gorhom.dev/react-native-bottom-sheet/usage",
            }}
          />
        </BottomSheetView>
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "grey",
  },
  contentContainer: {
    flex: 1,
    padding: 36,
    alignItems: "center",
  },
});

export default App;

问题原因 #

1. 布局约束问题：contentContainer设置了alignItems: center，会让子元素在水平方向居中，但WebView仅设置flex:1没有明确宽度，会被压缩到几乎不可见的宽度，导致无法显示。
2. 高度不足：BottomSheet默认初始展开高度可能不足以容纳WebView内容，进一步加剧显示异常。

解决方案 #

方案一：调整布局约束（推荐）

移除contentContainer的alignItems: center，单独给Text设置居中样式，同时给WebView明确宽度：

// 修改样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "grey",
  },
  contentContainer: {
    flex: 1,
    padding: 36,
    // 移除 alignItems: center
  },
  centeredText: {
    textAlign: "center",
    marginBottom: 16,
  },
});

// 修改JSX
return (
  <GestureHandlerRootView style={styles.container}>
    <BottomSheet ref={bottomSheetRef} onChange={handleSheetChanges}>
      <BottomSheetView style={styles.contentContainer}>
        <Text style={styles.centeredText}>Awesome 🎉</Text>
        <WebView
          style={{ flex: 1, width: "100%" }} // 明确设置宽度为100%
          source={{
            uri: "https://gorhom.dev/react-native-bottom-sheet/usage",
          }}
        />
      </BottomSheetView>
    </BottomSheet>
  </GestureHandlerRootView>
);

方案二：保留居中布局并设置高度与宽度

如果需要保留alignItems: center，可以给WebView设置固定宽度比例，同时给BottomSheet配置展开高度：

const App = () => {
  const bottomSheetRef = useRef<BottomSheet>(null);
  // 配置底部弹窗的展开高度选项
  const snapPoints = useMemo(() => ["80%", "100%"], []);

  const handleSheetChanges = useCallback((index: number) => {
    console.log("handleSheetChanges", index);
  }, []);

  return (
    <GestureHandlerRootView style={styles.container}>
      <BottomSheet 
        ref={bottomSheetRef} 
        onChange={handleSheetChanges}
        snapPoints={snapPoints}
        initialSnapIndex={0} // 初始展开到屏幕80%高度
      >
        <BottomSheetView style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
          <WebView
            style={{ flex: 1, width: "90%" }} // 设置宽度为父容器的90%
            source={{
              uri: "https://gorhom.dev/react-native-bottom-sheet/usage",
            }}
          />
        </BottomSheetView>
      </BottomSheet>
    </GestureHandlerRootView>
  );
};

验证效果 #

修改后重新运行项目，WebView应该能正常加载并展示目标网页内容，同时Text仍保持居中显示。

内容的提问来源于stack exchange，提问作者이현지