React Native中使用RealmProvider报constructor不可调用错误求助

错误原因 #

你在Navigation函数组件内部调用了createRealmContext，每次组件渲染时，这个调用都会重新生成一个全新的RealmProvider组件。React会把这个新生成的组件视为不同的构造函数，从而抛出"constructor is not callable"错误。

修复方案 #

将createRealmContext的调用移到组件外部，确保RealmProvider是一个稳定的组件引用，不会随组件渲染重复创建。

修改后的代码 #

import { createRealmContext } from '@realm/react';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const appId = "";
const realmConfig = { id: appId, timeout: 10000 }
const TodoSchema = {
  name: 'Todo',
  primaryKey: '_id',
  properties: {
    _id: 'objectId',
    text: 'string'
  }
}

// 移到组件外部，只创建一次
const config = {
  schema: [TodoSchema],
};
const { RealmProvider } = createRealmContext(config);

const Navigation = () => {
  const scheme = useColorScheme();
  const isDarkMode = scheme === "dark";
  const logStatus = true;
 
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        isReadyRef.current = true;
      }}
      theme={isDarkMode ? DarkTheme : LightTheme}
    >
      <RealmProvider>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <>
            <Stack.Screen name={SCREENS.INSTALLMANUAL}>
              {(props) => <InstallManual {...props} />}
            </Stack.Screen>
            <Stack.Screen name={SCREENS.FORGET_PASSWORD}>
              {(props) => <ForgetPasswordScreen {...props} />}
            </Stack.Screen>
          </>
          <>
            <Stack.Screen name={SCREENS.HOME} component={HomeScreen} />
            <Stack.Screen name={SCREENS.DETAIL}>
              {(props) => <DetailScreen {...props} />}
            </Stack.Screen>

            <Stack.Screen name={SCREENS.SLIDESHOW}>
              {(props) => <SlideshowScreen {...props} />}
            </Stack.Screen>
          </>
        </Stack.Navigator>
      </RealmProvider>
    </NavigationContainer>
  );
};

export default Navigation;

动态配置的特殊处理 #

如果你的Realm配置需要根据组件内部状态动态变化（比如依赖isDarkMode），可以使用useMemo缓存createRealmContext的结果，避免每次渲染重新创建：

const Navigation = () => {
  const scheme = useColorScheme();
  const isDarkMode = scheme === "dark";
  const logStatus = true;

  // 用useMemo缓存，仅当依赖变化时重新创建
  const { RealmProvider } = useMemo(() => {
    const dynamicConfig = {
      schema: [TodoSchema],
      // 这里可以添加依赖isDarkMode的配置项
    };
    return createRealmContext(dynamicConfig);
  }, [isDarkMode]);
 
  // ... 其余代码不变
};

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