React Native报错：availableHeight不确定，heightMeasureMode需为YGMesureModeUndefined

报错详情 #

报错内容：React-Native - availableHeight is indefinite so heightMeasureMode must be YGMesureModeUndefined

相关代码 #

<ImageBackground source={BG} style={{ flex: 1 }}>
    <ScrollView horizontal style={{ flex: 1, height: '100%' }}>
        <View style={{ paddingTop: '10%' }}>
            <Text style={[styles.bold, styles.textCenter, { fontSize: 18, color: c.yellow }]}>Data</Text>
            <View style={[styles.row, styles.justifyBetween, { width: '100%', paddingHorizontal: '5%', borderTopWidth: 1, borderBottomWidth: 1, borderColor: c.yellow }]}>
                <Text style={[styles.textWhite, { width: '10%' }]}>Sr.</Text>
                <Text style={[styles.textWhite, { width: '20%' }]}>User ID</Text>
                <Text style={[styles.textWhite, { width: '20%' }]}>Name</Text>
                <Text style={[styles.textWhite, { width: '25%' }]}>Phone</Text>
                <Text style={[styles.textWhite, styles.textCenter, { width: '20%' }]}>Active</Text>
                <Text style={[styles.textWhite, { width: '25%' }]}>Time/Date</Text>
            </View>
        </View>
        {loading ?
            <ActivityIndicator color={c.yellow} size='large' style={{ marginTop: '20%' }} /> :
            data.length > 0 ?
                <FlatList
                    data={data}
                    keyExtractor={(item, index) => index.id}
                    renderItem={dataList}
                    style={{ width: '100%', paddingHorizontal: '1%', marginTop: '5%' }} />
                : <Text style={[styles.textWhite, styles.textCenter, styles.bold, { fontSize: 20, marginTop: '20%' }]}>No Data Found!</Text>
        }
    </ScrollView>
</ImageBackground>

环境信息 #

• RN版本：0.70.6
• 系统：Ubuntu 22.04 LTS
• 运行环境：物理设备（非模拟器）
• NodeJS版本：16.18.1
• JDK：openjdk 11.0.17 2022-10-18
• Android Studio：Dolphin 2021.3.1

依赖列表 #

"@react-native-async-storage/async-storage": "^1.17.11",
"@react-native-community/blur": "^4.3.0",
"@react-native-community/clipboard": "^1.5.1",
"@react-native-masked-view/masked-view": "^0.2.8",
"@react-native-picker/picker": "^2.4.8",
"@react-navigation/native": "^6.0.13",
"@react-navigation/stack": "^6.3.4",
"@reduxjs/toolkit": "^1.9.0",
"axios": "0.27",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "^2.8.0",
"react-native-image-crop-picker": "^0.38.1",
"react-native-paper": "^4.12.5",
"react-native-qrcode-svg": "^6.1.2",
"react-native-reanimated": "^2.13.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "^13.6.0",
"react-native-vector-icons": "^9.2.0",
"react-redux": "^8.0.5"

问题说明 #

搜索该错误后发现相关回答称此错误仅在RN v0.56存在，未找到解决方案。需求是实现横向ScrollView中嵌套纵向FlatList，请解决该报错。

解决方案 #

这个错误的核心是嵌套滚动组件时高度计算冲突，横向ScrollView的高度设置模糊导致FlatList无法确定自身可用高度，可通过以下步骤修复：

1. 给FlatList明确设置高度
   避免FlatList依赖父组件的不确定高度，直接基于屏幕高度计算或指定固定高度：

   import { Dimensions } from 'react-native';
   const screenHeight = Dimensions.get('window').height;
   
   <FlatList
       data={data}
       keyExtractor={(item, index) => index.toString()} // 修复原keyExtractor的错误，index无id属性
       renderItem={dataList}
       style={{ width: '100%', paddingHorizontal: '1%', marginTop: '5%', height: screenHeight * 0.7 }} // 用屏幕高度的70%，可按需调整
   />
   

2. 优化横向ScrollView的高度约束
   把ScrollView的height: '100%'替换为明确的高度值，或配合父组件的flex约束：

   <ScrollView horizontal style={{ flex: 1, height: screenHeight }}>
   

3. 加固顶层布局约束
   用SafeAreaView包裹整个布局，适配不同设备的状态栏，同时确保ImageBackground的子组件有明确的尺寸约束：

   import { SafeAreaView } from 'react-native';
   
   <SafeAreaView style={{ flex: 1 }}>
       <ImageBackground source={BG} style={{ flex: 1 }}>
           {/* 原有内容 */}
       </ImageBackground>
   </SafeAreaView>
   

4. 修复keyExtractor的错误
   原代码中keyExtractor={(item, index) => index.id}是错误的，index为数字类型，无id属性，需改为index.toString()或使用item自身的唯一标识（如item.id）。

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