react-native-fast-image Android端配置

最新推荐文章于 2024-09-13 22:11:27 发布

bobby_fu

最新推荐文章于 2024-09-13 22:11:27 发布

阅读量1.3k

点赞数

分类专栏： ReactNative

本文链接：https://blog.csdn.net/bobby_fu/article/details/100523446

版权

ReactNative 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天在项目里使用了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,
  },
});