Question

我在ScrollView上遇到这个奇怪的问题，其中出现了一些图像，有些没有，而且看起来似乎是随机的。我正在使用android模拟器进行测试。

我有一个很大的个人资料列表，并附有图片。我正在这样的FlatList中显示这些内容：

    ......
    renderItem = ({ item }) => (   
    item == null || item.person == null || item.person.name == null
    ?     
    <Text/>
    :
    <ListItem
        title={item.person.name }
        subtitle={ this.getAge(item.person.birth_date)}            
        avatar={<Avatar
            medium
            rounded                
            source={ {uri: item.person.photos[0].url}}
            onPress={() => this.props.navigation.navigate('MatchImageList',
                {
                    images: item.person.photos
                }
            )}
            title={item.person.name}
          />}            
        hideChevron
    />
)

keyExtractor = (item, index) => index.toString();

render(){                
    const matches = this.state.matchArray;                
    return(            
        <FlatList
            keyExtractor={this.keyExtractor}
            data={matches}
            renderItem={this.renderItem}
        />                      
    )  
}

当您单击头像时，我们会将一些照片数据传递给组件：

export default class MatchImageList extends React.Component {
constructor(props){
    super(props);              
    const imageObjects = this.props.navigation.state.params.images
    const imageUrls = imageObjects.map(x=> x.processedFiles[0])

    this.state = {imageUrls: imageUrls}
}

renderImages(image, key){
    console.log("rendering image = " + image.url)
    return (                        
        <Image key={key} source={{uri: image.url, width: 320, height: 400}} />
    )
}

render() {
  const images = this.state.imageUrls;
  return (
    <ScrollView>
        {images.map((imageUrl, i) =>
            this.renderImages(imageUrl, i)            
        )}
    </ScrollView>
  );
 }
}

此问题发生在这里。最多显示8张图像，但通常更少。如果我从列表的高处单击一个配置文件（从带有化身的第一个屏幕），似乎出现了图像，但是如果我向下滚动并单击一个，则是否显示滚动视图是随机的图像。

调试时，我收到此消息：

VirtualizedList：您有一个更新缓慢的大列表-确保您的renderItem函数呈现遵循React性能最佳实践的组件，例如PureComponent，shouldComponentUpdate等。{dt：13247，prevDt：1980，contentLength：8023} < / p>

我不确定是否与此有关，是否是内存问题，等等。它也似乎是“分组”的-就像一大堆配置文件（如果启用）一样，将正确显示图像。但是，然后，如果您向下滚动一串并单击一个不起作用，则该一个下面的那个不起作用，该下面的那个不起作用，依此类推，直到找到一个起作用的，然后再一个直到找到一个不成功的方法，否则几乎没有效果。

React-native scrollView-为什么我的图像没有出现？

0 个答案: