在CRA React应用中使用React Native组件时SafeAreaView报错求助

问题重现 #

在Create React App（CRA）项目中渲染react-native-gifted-chat组件时，出现以下错误：

Uncaught Error: No safe area value available. Make sure you are rendering at the top of your app.
at useSafeAreaInsets (SafeAreaContext.tsx:121:1)
at SafeAreaView (SafeAreaView.web.tsx:28:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)

已尝试的操作：

• 在app.tsx中用react-native-safe-area-context的SafeAreaProvider包裹GiftedChat，并配置initialMetrics
• 使用craco修改Webpack及Babel配置

解决方案 #

1. 确保SafeAreaProvider包裹整个应用根节点 #

将SafeAreaProvider移至React应用的最顶层（index.tsx/index.js），而非仅包裹GiftedChat组件：

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <SafeAreaProvider
      initialMetrics={{
        insets: { top: 0, right: 0, bottom: 0, left: 0 },
        frame: { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight },
      }}
    >
      <App />
    </SafeAreaProvider>
  </React.StrictMode>
);

注意：initialMetrics的width/height使用window.innerWidth/window.innerHeight适配Web窗口尺寸，而非固定值。

2. 完善React Native Web的依赖与配置 #

react-native-gifted-chat依赖react-native-web，CRA默认未配置相关规则，需补充：

安装依赖

执行命令安装所需包：

npm install react-native-web react-native-safe-area-context @react-native-community/hooks

更新craco.config.js

添加react-native-web别名、文件后缀支持及适配的Babel预设：

const path = require('path');

module.exports = {
  webpack: {
    configure: {
      ignoreWarnings: [
        function ignoreSourcemapsloaderWarnings(warning) {
          return (
            warning.module &&
            warning.module.resource.includes('node_modules') &&
            warning.details &&
            warning.details.includes('source-map-loader')
          );
        },
      ],
      resolve: {
        alias: {
          'react-native$': 'react-native-web',
          '@': path.resolve(__dirname, 'src'),
        },
        extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
      },
    },
  },
  babel: {
    presets: [
      '@babel/preset-react',
      'module:metro-react-native-babel-preset'
    ],
    plugins: [],
  },
};

3. 自定义GiftedChat组件规避SafeAreaView依赖（备选方案） #

若上述配置仍无效，可通过自定义组件禁用GiftedChat默认的SafeAreaView包裹：

import { GiftedChat, Bubble, InputToolbar, Send } from 'react-native-gifted-chat';
import { View, StyleSheet } from 'react-native';

const CustomChat = ({ messages, onSend, user }) => {
  return (
    <View style={styles.container}>
      <GiftedChat
        messages={messages}
        onSend={(newMessages) => onSend(newMessages)}
        user={user}
        renderInputToolbar={(props) => (
          <InputToolbar {...props} containerStyle={styles.inputToolbar} />
        )}
        renderBubble={(props) => <Bubble {...props} wrapperStyle={{ right: { backgroundColor: '#007AFF' } }} />}
        renderSend={(props) => <Send {...props} containerStyle={styles.sendButton} />}
        bottomOffset={0} // 禁用默认SafeArea偏移
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    height: '100vh',
  },
  inputToolbar: {
    backgroundColor: '#f0f0f0',
    padding: 8,
  },
  sendButton: {
    marginRight: 8,
  },
});

export default CustomChat;

4. TypeScript项目补充类型配置 #

若使用TypeScript，在tsconfig.json中添加react-native-web的路径映射：

{
  "compilerOptions": {
    "paths": {
      "react-native": ["./node_modules/react-native-web"]
    }
  }
}

内容的提问来源于stack exchange，提问作者Chee Herng Huan