如果是原生和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,
},
});