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>您可以要求 .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

最后在 index.js 上导入 Row.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>
  }
}

希望这会对你有所帮助。干杯！

Answer 2

回答您的问题如何使用ListView渲染20张图像。我们使用SectionList来渲染多张照片。我将分享下面的片段，以帮助您入门。

<强> 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 ，我们花了一些时间来获取SectionList的格式/架构。 RN文档中记录了格式本身。希望这有帮助！

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

2 个答案: