React Native：如何使用本地图像制作 Listview

Question

我制作了一张看起来像这样的专辑：

<ScrollView>   
  <Image1 
     <Text1>
        smth
     </Text1>    />

  <Image2
     <Text2>
        smthElse
     </Text2>    />' ... and so on 20 times.

我有 5 个相册，我通过顶部的标签访问这些相册。问题是，有时当我在选项卡之间切换时，有些图像是空白的，无法加载。图片都是这样要求的：

source={require('../assets/Image1.png')}

我希望应用需要它们，而不是通过 uri。

我认为问题出在内存上，在较弱的手机上它们可能并不总是加载，因为我使用 ScrollView 并且它会一次加载所有图像。我读到 ListView 完全解决了我的问题，但我不知道如何制作一个 ListView 来呈现 20 个特定图像，每个图像都有特定文本。

如果有人能给我一些线索，将不胜感激。

谢谢！

Answer 1

针对您的问题，如何使用 ListView 呈现 20 张图像。我们正在使用 SectionList 渲染多张照片。我将分享下面的片段以帮助您入门。

分区列表

<SectionList
    contentContainerStyle={styles.sectionListContainer}
    renderItem={this.renderItem}
    renderSectionHeader={this.renderHeader}
    sections={this.state.ImageData}
/>

this.renderItem

renderItem(data) {
    return (
        <View key={data.item.key} style={{ flex: 1 }}>
            <View style={{ flex: 1, flexDirection: "row", flexWrap: "wrap" }}>
                <Image
                    style={styles.foodPhoto}
                    source={{ uri: `data:image/jpg;base64,${data.item.photo}`}}
                />
            </View>
        </View>
    )

}

为了格式化 this.state.ImageData 我们花了一些功夫才让 formatting/schema 适合 SectionList。格式本身记录在 RN 文档中。希望这会有所帮助！

Answer 2

为了使用 <ListView> 您可以要求 .js 文件中的所有图像。在 .js 文件的顶部，您可以做的是

index.js

import React, { Component } from 'react';
import {Listview} from 'react-native'; //Import your other imports ofcourse

// Require all your images here
const image1 = require('../assets/Image1.png')
const image2 = require('../assets/Image2.png')

//.. And so on
export default class ClassName extends Component{
//...
}

下一步是创建一个 数组对象 并将其添加到 index.js 的构造函数中，就像这样

index.js

import React, { Component } from 'react';
import {Listview} from 'react-native'; //Import your other imports ofcourse

// Require all your images here
const image1 = require('../assets/Image1.png')
const image2 = require('../assets/Image2.png')

var data = [{title:"You image title", image: image1}, {title:"Your Image title",image: image2}]

export default class ClassName extends Component{
   constructor(props) {
     super(props);
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
     this.state = {
       dataSource: ds.cloneWithRows(data),
     };
  }
}

下一步创建一个Row.js

Row.js

import React from 'react'
import { StyleSheet, Dimensions, Platform, Image, View, Text } from 'react-native';
const Row = (props) => (
  <View style={{flex:1, flexDirection: 'row'}}> //Don't forget this
    <Image source={props.image}>
      <Text>{props.title}</Text> 
    </Image>
  </View>
)

export default Row

最后将 Row.js 文件导入 index.js 并添加 <ListView>你的 render()

index.js

import React, { Component } from 'react';
import {View,Listview} from 'react-native'; //Import your other imports ofcourse
import Row from './Row'; //If it's on the same folder

// Require all your images here
const image1 = require('../assets/Image1.png')
const image2 = require('../assets/Image2.png')

var data = [{title:"You image title", image: image1}, {title:"Your Image title",image: image2}]

export default class ClassName extends Component{
   constructor(props) {
     super(props);
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
     this.state = {
       dataSource: ds.cloneWithRows(data),
     };
  }
  render(){
     <View>
       <ListView
         style={{flex:1}} //Don't forget this too
         dataSource={this.state.dataSource}
         renderRow={(data) => <Row {...data} />}
       />
     </View>
  }
}

希望对您有所帮助。干杯！

React Native：如何使用本地图像制作 Listview

React Native: How to make Listview with with local images

react-native

react-native-android

react-native-router-flux