React-Native - availableHeight 不确定，因此 heightMeasureMode 必须为 YGMesureModeUndefined

Question

我收到此错误

这是我的代码

<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 海豚 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 中退出的。

我想在 Horizontal ScrollView 中使用 Vertical Flatlist

Answer 1

不得在 ScrollVeiw 子项或平面列表项中使用百分比值

 <ImageBackground source={BG} style={{ flex: 1 }}>
      <ScrollView horizontal style={{ flex: 1, height: '100%' }}>
          <View style={{ paddingTop: 70 }}>//not paddingTop:10%

Answer 2

从来没想过这一点，但它确实有效。太棒了！！！