React Native:Android没有显示所有图像(即使它们是相同的)

Question

我在我的应用程序中使用了8个图像(本地存储)

• 3种尺寸的背景图像(@ 1~700 kb,@ 2~2,9 mb,@ 3~6,5 mb)
• 5个不同的图像,每个约100 kb

我将图像随机放在一些卡片上,这些卡片可以相互滑动(使用react-native-snap-carousel.

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

我在一些没有加载所有图像的Android设备上看到一些问题.

这是我试过的:

android:largeHeap ="true" - 在清单中

运行 react-native-assets

反应原生捆绑......

有我的代码:

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>
    )
  }
}

UPDATE

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

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

(我知道我的代码可能看起来很乱,但我还在学习..)

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

Answer 1

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

1. React Native 中存在一个已知的 Android 图像消失问题。尝试从图像中完全删除 resizeMode 属性，然后查看是否所有这些都已加载。如果这有效，请尝试自己调整图像大小。

   <Image source={Lions[this.state.lionName]} 
      style={{
         height: this.state.lionHeight,
         paddingBottom: 30
      }}
      // resizeMode="contain"
   /> 
   

2. 您使用的轮播包有一些已知的 Android 问题和一些性能提示，值得一看 https://github.com/archriss/react-native-snap-carousel#important-note-regarding-android

3. 您有很多包含在另一个 FlatList 中的 FlatList 轮播。您可以通过在项目中使用 shouldComponentUpdate 来防止多次不必要的重新渲染，从而提高性能。

我希望这有帮助