如何在React Native中實現圖片懶加載

在React Native中實現圖片懶加載，可以使用第三方庫react-native-fast-image

1. 安裝react-native-fast-image庫：

npm install react-native-fast-image --save

對于iOS，你還需要在ios/Podfile中添加以下內容：

pod 'react-native-fast-image', :path => '../node_modules/react-native-fast-image'

然后運行pod install。

2. 鏈接native模塊（僅限于React Native < 0.60版本，對于0.60及更高版本，請使用自動鏈接）：

react-native link react-native-fast-image

3. 在你的代碼中使用FastImage組件：

import FastImage from 'react-native-fast-image';

// ...

<FastImage
  source={{uri: 'https://example.com/your-image-url'}}
  style={{width: 100, height: 100}}
  resizeMode={FastImage.resizeMode.contain}
/>

// ...

4. 為了實現懶加載，你需要使用react-native-fast-image提供的onLoad回調函數。當圖片加載完成時，這個函數會被調用。你可以在這個函數里執行你需要的操作，例如滾動到圖片位置等。

<FastImage
  source={{uri: 'https://example.com/your-image-url'}}
  style={{width: 100, height: 100}}
  resizeMode={FastImage.resizeMode.contain}
  onLoad={() => {
    // 在這里執行你需要的操作，例如滾動到圖片位置等
  }}
/>

5. 為了進一步優化性能，你可以使用react-native-fast-image的placeholder屬性來顯示一個占位符，當圖片正在加載時顯示。

<FastImage
  source={{uri: 'https://example.com/your-image-url'}}
  style={{width: 100, height: 100}}
  resizeMode={FastImage.resizeMode.contain}
  placeholder={<View style={{backgroundColor: 'gray'}} />}
  onLoad={() => {
    // 在這里執行你需要的操作，例如滾動到圖片位置等
  }}
/>

通過以上步驟，你就可以在React Native中實現圖片懶加載了。