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

Question

它不会在某些 android 中呈现，例如 moto g4 和三星 a50 ！它在某些 Android 设备和 iOS 中完美呈现。当用户尝试打开应用程序时，图像未按预期呈现。

反应本机版本：

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>

Answer 1

尝试使用react-native-fast-image它将缓存图像并非常快速地呈现。

Answer 2

该问题特定于Android pie (9)不使用时https。就我而言，所有网址都会http导致问题。

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是没有必要的。