react-native-fast-image Android端配置

今天在項目裏使用了react-native-fast-image，現在記錄一下過程

如果是原生和RN混合開發，首先執行以下代碼：

yarn add react-native-fast-image

然後在Android添加依賴：

• 1.在android/settings.gradle裏增加代碼：

include ':react-native-fast-image'
project(':react-native-fast-image').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fast-image/android')

• 2.在android/app/build.gradle裏增加代碼：

dependencies {
   ...
   implementation project(':react-native-fast-image')
   ...
}
 

• 3.在android/app/src/main/java/…/MainApplication.java裏增加代碼

package com.myapp;

  import com.dylanvann.fastimage.FastImageViewPackage;

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage()
            new FastImageViewPackage()
        );
    }

}

完整代碼：

import React,{ PureComponent } from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import FastImage from 'react-native-fast-image';

export default class Demo extends PureComponent {

  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.ImageView}>
        	<FastImage
              key={i}
              style={styles.ImageItem}
              source={{ 
              	uri: 'https://unsplash.it/400/400?image=1', 
              	priority: FastImage.priority.normal }}
            />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: '100%',
  },
  ImageView: {
    flex: 1,
    backgroundColor: ct.colorBgWhite,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    flexWrap: 'wrap',
    padding: 10,
    marginTop: 10,
  },
  ImageItem: {
    height: 70,
    width: 70,
    margin: 5,
  },
});