使用 require() 加載功能組件

Question

我的應用程序需要很長時間（15 秒 2GB RAM/10 秒 3GB RAM/5 秒 4GB RAM）進行冷啟動，我正在努力減少這個時間。 受到Inline Requires 的啟發，我正在嘗試按需加載一些功能組件。 所以我這樣做 -

日期選擇器.tsx

import React from 'react';
import DateTimePicker, { DateTimePickerProps } from 'react-native-modal-datetime-picker';

...

export const DatePicker: React.FC<DatePickerProps> = (props) => {

return (
  <DateTimePicker
   date={props.date}
   isVisible={props.isDateTimePickerVisible}
   ...
  />
);

};

添加記錄.tsx

 //Intentionally commented import 
 //import { DatePicker } from '@aph/mobile-patients/src/components/ui/DatePicker';
 
 ...

 let DatePicker: any = null;

 export const AddRecord: React.FC<AddRecordProps> = (props) => {
    const [isDateTimePickerVisible, setIsDateTimePickerVisible] = useState<boolean>(false);

    return(
      <View>
        <Text  onPress={() => {
            setIsDateTimePickerVisible(true);

            if (DatePicker == null) {
              DatePicker = require('@aph/mobile-patients/src/components/ui/DatePicker');
            }

            Alert.alert('Clicked');

            console.log('check DatePicker ', DatePicker);
          }}> Click Me </Text>

          {isDateTimePickerVisible ? (
            <DatePicker
               isDateTimePickerVisible={isDateTimePickerVisible}
                ...
             />
          ) : null}
      </View>
    );
 }

但是模擬器報錯

記錄 DatePicker object -

Answer 1

setIsDateTimePickerVisible在 DatePicker 加載之前設置為 true。

我不確定，但我想可能是：

<Text  onPress={() => {
            if (DatePicker == null) {
              DatePicker = require('@aph/mobile-patients/src/components/ui/DatePicker');
            }

            Alert.alert('Clicked');
 
            console.log('check DatePicker ', DatePicker);
            setIsDateTimePickerVisible(true); // <- update the state after


          }}> Click Me </Text>