React Native中FlatList在Android无显示但iOS正常的问题求助

问题现象 #

我开发的React Native应用里，用Axios从API拿数据的FlatList组件在iOS模拟器上完全正常，但Android模拟器只显示空白屏。把FlatList删掉直接渲染Article组件时，Android能正常展示内容，重新加回FlatList就又没东西了。

相关代码 #

HomeScreen代码

import React, {useEffect, useState} from 'react';
import { SafeAreaView, StyleSheet, FlatList } from 'react-native';
import Article from '../components/Article';
import axios from 'axios';

const HomeScreen = () => {
    const [articles, setArticles] = useState([]);

    const getNews = () => {
        axios.get('https://newsapi.org/v2/top-headlines?country=us&apiKey=65b529cf968b4b819070a4e078a109d3',{
                params: { category:'sports' }
            })
        .then((response) => {
            setArticles(response.data.articles);
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    useEffect(()=>{
        getNews();
    }, [])

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                style={{ height: '100%', paddingBottom: 50 }}
                data = {articles}
                renderItem = {({item}) => 
                    <Article
                        urlToImage = {item.urlToImage}
                        title = {item.title}
                        description = {item.description}
                        author = {item.author}
                        publishedAt = {item.publishedAt}
                        sourceName = {item.source.name}
                    />}
                keyExtractor = {(item) => item.title} 
            />    
        </SafeAreaView>)  
}

export default HomeScreen

const styles = StyleSheet.create({
    container: {}
})

Article组件代码

import moment from 'moment'
import React from 'react'
import { SafeAreaView, View, Image, StyleSheet, Text } from 'react-native'

const Article = (props) => {
    return (<SafeAreaView style={styles.container}>
        <Image 
        style={styles.image}
        source={{ uri: props.urlToImage }}
        />
        <View style={{padding: 20}}>
            <Text style={styles.title}>{props.title}</Text>
            <Text style={styles.description} numberOfLines={3}>{props.description}</Text>
            <View style={styles.data}>
                <Text style={styles.by}>Publicado por: <Text style={styles.author}>{props.author}</Text></Text>
                <Text style={styles.date}>{moment(props.publishedAt).format("MMM Do YY")}</Text>
            </View>
            <View style= {{marginTop:10}}>
                <Text style={styles.source}>Promoter: <Text style={styles.sourceLink}>{props.sourceName}</Text></Text>
            </View>
        </View>
    </SafeAreaView>)
}

export default Article

const styles = StyleSheet.create({
    container: {
        width: '90%',
        alignSelf: 'center',
        borderRadius: 40,
        shadowOpacity: 0.5,
        shadowColor: '#000',
        shadowOffset: { height: 5, width: 5 },
        backgroundColor: '#FFF',
        marginTop: 20
    },
    image: {
        height: 200,
        width: "100%",
        borderTopLeftRadius: 40,
        borderTopRightRadius: 40
    },
    title: { fontSize: 18, fontWeight: '600', marginTop: 10 },
    description: { fontSize: 16, fontWeight: '400', marginTop: 10 },
    data: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 },
    date: { color: '#38A3A5', fontWeight: 'bold' },
    author: { fontWeight: 'bold', color: '#38A3A5' },
    by: { fontWeight: '400' },
    source: { fontSize: 14, fontWeight: '400' },
    sourceLink: { fontSize: 14, fontWeight: 'bold', color: '#38A3A5' }
})

应用入口代码

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import HomeScreen from './screens/HomeScreen'

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <HomeScreen/>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 }
})

export default App;

问题根源与修复方案 #

1. 多层SafeAreaView冲突（核心问题） #

Android对多层SafeAreaView的布局计算存在兼容性问题，Article组件里嵌套的SafeAreaView会和外层的HomeScreen、App入口的SafeAreaView挤压布局，导致FlatList无法正常渲染。

修复： 把Article组件里的SafeAreaView换成普通View：

// 修改Article组件的外层容器
const Article = (props) => {
    return (<View style={styles.container}>
        // 内部代码保持不变
    </View>)
}

2. HomeScreen父容器无flex属性 #

HomeScreen的SafeAreaView样式container为空，没有设置flex:1，导致FlatList无法获取有效高度，Android下这个问题会被放大。

修复： 给HomeScreen的container添加flex属性：

const styles = StyleSheet.create({
    container: { flex: 1 }
})

3. keyExtractor使用重复值 #

用item.title作为key，若API返回的新闻有重复标题，会导致FlatList渲染异常，Android对重复key的容忍度比iOS低。

修复： 改用API返回的唯一字段当key，比如item.url：

<FlatList
    // 其他属性不变
    keyExtractor = {(item) => item.url} 
/>

可选优化：显式设置初始渲染数量 #

Android下可以给FlatList加initialNumToRender属性，确保初始渲染内容：

<FlatList
    // 其他属性不变
    initialNumToRender={5}
/>

内容的提问来源于stack exchange，提问作者Noisemastering