Question

我在我的应用中使用了8张图片（本地存储）

3种尺寸的背景图像（@ 1~700 kb，@ 2~2,9 mb，@ 3~6,5 mb）
每张约100 kb的5张不同图像

我将图像随机放在一些卡片上，这些卡片可以相互滑动（using react-native-snap-carousel。

您可以向下滚动并翻转卡片。

我在一些未加载所有图片的Android设备上看到了一些问题..

这是我试过的：

android:largeHeap="true" - in the manifest

Running react-native-assets

react-native bundle ...

有我的代码：

Person.js

const Persons = {
  bob: require('./images/bob.png'),
  alice: require('./images/alice.png'),
  john: require('./images/john.png'),
  isabella: require('./images/isabella.png'),
  josefine: require('./images/josefine.png'),
}

const PersonNames = ['bob', 'alice', 'john', 'isabella', 'josefine']

export { Persons, PersonNames }

Card.js

import React, { Component } from 'react'
import {
  Image,
  View,
  Text,
  StyleSheet,
  Platform,
  Dimensions,
} from 'react-native'
import FadeImage from 'react-native-fade-image'

import { Persons, PersonNames } from '../Person'

const cardHeight = Math.round(Dimensions.get('window').width * 0.75)

// create a component
export default class AngleInvestor extends Component {
  state = {
    person: PersonNames[~~(PersonNames.length * Math.random())],
    personHeight: 250,
  }

  render() {
    return (
      <View style={styles.container}>
        <Text
          style={{
            textAlign: 'center',
            padding: 15,
            marginHorizontal: 15,
          }}
          onLayout={({ nativeEvent }) => {
            this.setState({
              personHeight: cardHeight - 15 - nativeEvent.layout.height,
            })
          }}
        >
          {this.props.question}
        </Text>

        <FadeImage
          source={Person[this.state.person]}
          style={{
            height: this.state.personHeight,
            paddingBottom: 30,
          }}
          resizeMode="contain"
          duration={1000}
        />
      </View>
    )
  }
}

更新

我开源了整个代码，因为当代码嵌套时很难在SO帖子中提供所有需要的信息。

整个代码在这里： https://github.com/Norfeldt/LionFood_FrontEnd

（我知道我的代码可能看起来很乱，但我还在学习......）

我不希望人们进入并使用PR修复我的代码（即使它会很棒），但只是给我一些关于如何在两个平台上正确处理图像的代码指导。

Answer 1

我认为您遇到的问题需要考虑很多参数。

在React Native中出现了一个已知的Android问题。尝试从您的图像中完全删除resizeMode prop并查看是否所有这些都已加载。如果这样做，请尝试自己实现图像的大小调整。
```
<Image source={Lions[this.state.lionName]} 
   style={{
      height: this.state.lionHeight,
      paddingBottom: 30
   }}
   // resizeMode="contain"
/> 
```
您正在使用的轮播包有一些已知的Android问题和一些值得一看的性能提示 https://github.com/archriss/react-native-snap-carousel#important-note-regarding-android
您有很多旋转木马是另一个FlatList中包含的FlatLists。您可以在项目中使用shouldComponentUpdate来提高性能，以防止多次不必要的重新渲染。

我希望这会有所帮助

Answer 2

我确实遇到了同样的问题，我使用 react-native-fast-image 修复了它。您仍然可以保留所有选项，只需将 <Image 更改为 <FastImage。

React Native：Android没有显示所有图像（即使它们是相同的）

更新

2 个答案: