当前位置: 首页 > 工具软件 > Fast-ismartx > 使用案例 >

关于react-native-fast-image的使用

魏宏邈
2023-12-01

如果是原生和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 fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
+   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,
  },
});
 类似资料: