React Native：Android 未显示所有图像（即使它们相同）答案

【问题标题】：React Native: Android is not showing all images (even though they are the same)React Native：Android 未显示所有图像（即使它们相同）
【发布时间】：2018-10-17 01:33:43
【问题描述】：

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

3 种尺寸的背景图片（@1 ~700 kb、@2 ~ 2.9 mb、@3 ~6.5 mb）
5 张不同的图片，每张约 100 kb

我将图像随机放置在一些可以相互滑动的卡片上 (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 }

卡片.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 修复我的代码（即使它会很棒），但只是给我一些关于如何在两个平台上正确处理图像的代码指导。

【问题讨论】：

Does not call setState in onLayout prop 弹出警告？在您设置 cardHeight 时也未定义它。你的意思是{cardHeight: this.state.cardHeight - 15 - nativeEvent.layout.height}？
@bennygenel 对不起。我使用了一些愚蠢的变量名——所以在我的 SO 帖子中重命名了它们——没有注意到我正在重用变量名 cardHeight。所以用cardHeight和personHeight更新了我的问题
@bennygenel 不，我在onLayout 中调用setState 时没有看到任何警告..

标签： javascript android reactjs react-native

【解决方案1】：

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

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

希望对你有帮助

【讨论】：

这是您想出的解决方案，还是您在其他地方看到过此内容？关于这个帖子有很多问题，这是唯一对我有用的东西
这是一篇旧帖子，但我记得我检查了描述中的 repo 并尝试调试它。当我删除 resizeMode 道具时，一切正常。经过搜索，我发现其他人也有同样的问题：例如stackoverflow.com/questions/38117433/…。我希望这会现在解决...

【解决方案2】：

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

【讨论】：