React Native集成smartlook首次初始化报错，热重载后正常求助

问题原因 #

你当前将smartlookClient.init('xxx')放在组件顶层直接执行，此时React Native的运行环境还未完全初始化完成。Smartlook的初始化代码依赖了Web环境的window.document对象，但在RN应用启动初期，该对象尚未存在，因此抛出TypeError: undefined is not an object (evaluating 'window.document.getElementsByTagName')错误。而热重载时，应用环境已经完全就绪，相关对象已加载，所以初始化能正常执行。

解决方案 #

将Smartlook的初始化逻辑移到useEffect钩子中，确保在组件挂载完成、RN环境就绪后再执行。同时可结合跟踪权限请求，保证权限获取后再初始化（根据业务需求调整）。

修改后的完整代码：

import React, {useEffect} from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  View,
  Text,
  TextInput,
} from 'react-native';
import RootNavigation from './src/routes';
import {useFonts} from 'expo-font';
import fonts from './src/theme/fonts';
import {LogBox} from 'react-native';
import 'react-native-gesture-handler';
import {
  requestTrackingPermissionsAsync,
  getTrackingPermissionsAsync,
} from 'expo-tracking-transparency';
import smartlookClient from 'smartlook-client';

const App = () => {
  const [loaded] = useFonts(fonts);
  LogBox.ignoreLogs(['Warning: ...']);

  useEffect(() => {
    const initializeSmartlook = async () => {
      // 先请求跟踪权限
      const {status} = await requestTrackingPermissionsAsync();
      if (status === 'granted') {
        console.log('已获取用户跟踪权限');
        // 权限允许后初始化Smartlook
        smartlookClient.init('xxx');
      } else {
        console.log('未获取跟踪权限，Smartlook初始化可能受限');
        // 可选：即使无权限也初始化，根据业务需求调整
        // smartlookClient.init('xxx');
      }
    };

    initializeSmartlook();
  }, []);

  Text.defaultProps = Text.defaultProps || {};
  Text.defaultProps.allowFontScaling = false;
  TextInput.defaultProps = {
    ...(TextInput.defaultProps || {}),
    allowFontScaling: false,
  };

  if (!loaded) {
    return null;
  }

  return (
    <View style={styles.container}>
      <StatusBar
        translucent
        barStyle="dark-content"
        backgroundColor={'transparent'}
      />
      <View style={styles.container}>
        <RootNavigation />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default App;

额外说明 #

• useEffect的空依赖数组确保初始化逻辑仅在组件挂载时执行一次，避开首次渲染时环境未就绪的阶段。
• 结合跟踪权限请求是因为Smartlook的核心功能可能需要用户授权，这样能保证初始化的合法性与功能完整性。
• 若无需等待权限，也可直接在useEffect内执行初始化，但必须保证逻辑在钩子内部，避免顶层执行的时机问题。

内容的提问来源于stack exchange，提问作者Nguyễn Hiếu