logo标签列表

在某些安卓设备上，FlatList 中的图像无法渲染。

androidimagereact-nativerenderreact-native-flatlist
7

有些安卓设备（如moto g4和samsung a50）无法呈现该内容！！在某些安卓设备和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>
如果您能在 https://snack.expo.io/ 重新生成您的问题，那将非常好。 - OriHero
1
尝试为 <Image> 组件设置一些静态高度，以后如果可以正常显示，您就可以轻松地进行调试。 - Ravi
@Ravi，这些图片确实有高度。 - fct
1
你能否移除resizeMode={'cover'}，看看这是否会使图像在所有设备上显示？当我在Android上使用Flatlists时，使用resizeMode cover出现了问题。 - needsleep
@needsleep 这并不能解决问题。 - fct
3个回答
6
我已经尝试过，好像解决了这个问题，但我的应用程序依赖于CodePush，如果我发布了一个带有新库的新更新，它会中断。 - fct
我切换到了 react-native-fast-image 库并打算在生产环境中进行测试。它能够正常工作，我将其作为可接受的答案进行了检查。 - fct
你可以下载需要使用的图片并稍后删除，我们之前遇到过一些与图片和设备有关的问题，有时候问题出在快速图片内部。你尝试过在图片中使用onError回调函数吗？ - André Pinto
它并没有解决问题。 - fct
2

可能有很多原因。

1- 您可以尝试删除 "removeClippedSubviews={true}" 属性。

2- 可能是性能问题。您是否尝试过 flatlist 的 maxToRenderPerBatch 属性？

3- 您是否尝试过 flatlist 的 extraData 属性？您可以像这样使用：extraData={this.state}

1 - 它没有起作用 2 - 还没有尝试过 3 - 它没有起作用 - fct
1
你成功了吗？我一直在避免使用react-native-fast-image库。 - fct
我之前没有尝试过在图像组件上使用它，但是在某些安卓设备上，我遇到了一些FlatList的性能问题。特别是maxToRenderPerBatch属性对我非常有用，解决了我的性能问题。 - Kubilay Kiymaci
2
问题出现在未使用 https 的 Android pie (9) 上。在我的情况下，所有的 URL 都是 http，这就导致了问题。
可以使用以下 URL http 解决问题。
<?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不是必需的。

1
恭喜你 :) 并感谢你的分享，这对我来说是非常有用的信息。我想问你一个问题，你说“它不能渲染moto g4”。我知道默认情况下它是安卓6.0，不是吗？你确定这是特定于安卓派的吗？ - Kubilay Kiymaci
@KubilayKiymaci 是的，我就是。这正是问题所在。图像没有被渲染出来。你可以在这里看到 https://github.com/facebook/react-native/issues/24720#issuecomment-566346324 - fct
1
也许我在提问时犯了错误，但我的意思是这个问题是特定于Android 9或Android 9以下的版本吗？例如，我们能否在Android 5、6、7或9中看到这个问题？ - Kubilay Kiymaci
在我的情况下，只有Android 9（Pie）和可能更高版本的Android 5、6、7不会发生。 - fct
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接