在某些 android 设备中，图像不会在 FlatList 上呈现

Posted 2023-02-22

【中文标题】在某些 android 设备中，图像不会在 FlatList 上呈现

【英文标题】：Image does not render on FlatList in some android devices

【发布时间】：2020-03-31 21:04:32

【问题描述】：

它不会在 moto g4 和 samsung a50 等一些 android 中呈现！它可以在某些 Android 设备和 ios 中完美呈现。当用户尝试打开应用程序时，图像未按预期呈现。

React Native 版本：

System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 943.08 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.12.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 16, 23, 24, 25, 26, 27, 28
      Build Tools: 23.0.1, 25.0.0, 25.0.2, 26.0.0, 26.0.1, 26.0.2, 27.0.3, 28.0.2, 28.0.3
      System Images: android-16 | Intel x86 Atom, android-16 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
      Android NDK: 16.0.4293906-beta1
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    create-react-native-app: 2.0.2
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7
    react-native-progress-circle: 2.0.0

重现步骤（我的代码）

<View style=flex:1,width:'100%',height:'100%'>     
  <View style=flex:1, height:'100%',backgroundColor:'#fff', paddingBottom:0>
    <ScrollView removeClippedSubviews=true style=padding:10,flex:1 refreshControl=(<RefreshControl refreshing=this.state.refreshing onRefresh=this._onRefresh.bind(this)/>)>
      <View style=marginBottom:30>
        <Text style=fontWeight:'bold',color:'#000',fontSize:24>feed.title</Text>
        <FlatList
          removeClippedSubviews=true 
          style=marginTop:10,flexDirection:'column'
          data=feed.content
          horizontal=true
          keyExtractor=(item,index) => index
          renderItem=(item,index) => 
            return (
              <TouchableOpacity style=marginBottom:15,flexBasis: '100%',flex:1 onPress=()=>this.contentOnPress(item)>
                <View style=alignItems: 'center',width:width,height:this.height*0.6,borderRadius:5>
                  <Image resizeMode='cover' style=width:width, height:(this.height*0.6), borderRadius:5,borderWidth:1,borderColor:'#ccc' resizeMode='cover' source=(item.thumb ? uri: item.thumb.replace('upload/','upload/q_auto,w_auto/') : require('./../../assets/img/profile-pic.png'))/>
                </View>
                <View>
                  <Text style=fontWeight:'bold',color:'#000' numberOfLines=1>item.header</Text>
                  <Text style=color:'#000' numberOfLines=1>item.title</Text>
                </View>
              </TouchableOpacity>
            )
         />
      </View>
    </ScrollView>
  </View>
</View>

【问题讨论】：

如果在snack.expo.io重新生成你的问题就好了

尝试给<Image> 组件一些静态高度。如果可行，稍后您可以轻松调试它。

@Ravi ，图片确实有高度

你能去掉 resizeMode='cover' 看看这是否会使图像出现在所有设备上吗？在 android 上使用 Flatlists 时，我遇到了 resizeMode 封面问题。

@needsleep 它不能解决问题

【参考方案1】：

当不使用https 时，问题是特定于Android pie (9)。在我的情况下，所有的网址都是http，这会导致问题。

可以使用urlhttp下面的解决方案

<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
    <application android:networkSecurityConfig="@xml/network_security_config">
    </application>
</manifest>

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

我通过将http 替换为https 来修复

详情在这里https://github.com/facebook/react-native/issues/24720

在这种情况下，react-native-fast-image 和 removeClippedSubviews 不是必需的。

【讨论】：

恭喜 :) 感谢您的分享，这对我来说也是非常有用的信息。我想问你一个问题，你说“它不会渲染 moto g4”。我知道它默认是android 6.0，不是吗？你确定这在 android pie 上是特别的吗？

@KubilayKiymaci 是的，我是。这正是问题所在。图像未渲染。图像变为空白。你可以在这里看到github.com/facebook/react-native/issues/…

也许我在问问题时弄错了。但我的意思是这是一个在 android 9 或 android 9 下特别存在的问题？例如，我们可以看到问题 android 5,6,7 或 9？

在我的情况下只有 android 9 (pie) 和更高版本的 Android 5、6、7.. 不会发生

【参考方案2】：

可能有很多原因。

1- 你可以尝试删除“removeClippedSubviews=true”道具吗？

2- 可能是性能问题。你试过 flatlist 的 maxToRenderPerBatch 属性吗？

3- 你试过 flatlist 的 extraData 属性吗？你可以这样使用：extraData=this.state

【讨论】：

1 - 没用 2 - 还没试过 3 - 没用

它对你有用吗？我正在避免使用 react-native-fast-image 库

我之前没有尝试过使用图像组件，但我在某些 android 设备上使用 flatlist 时遇到了一些性能问题。特别是，maxToRenderPerBatch 道具对我非常有用，并解决了我的性能问题。

【参考方案3】：

尝试使用react-native-fast-image，它将缓存图像并快速渲染。

【讨论】：

我已经尝试过了，它似乎可以解决问题，但我的应用程序依赖于 codepush，如果我使用新的 lib 发布新的更新，它就会中断。

我转移到 react-native-fast-image 库，我将在生产环境中测试它。它工作我检查为可接受的答案..

您可以做的是下载必要的图像以供使用并稍后将其删除，我们之前在图像和设备上遇到过一些问题，有时问题出在快速图像内部。您是否尝试过在图像中使用 onError 回调？

它不能解决问题