FlatList 在 React-Native 博览会中不滚动（水平）

Question

我有两个在 App.js 中呈现的子组件，我的问题是第二个子组件 (BottomHorizontalBoxes.js)。我可以从 API 渲染项目，但它不会在 FlatList 中滚动，它会弹回起始位置而不显示所有项目。另外，如果 item.title（文本）有更多字母，灰色矩形框就会变大。我想保持它的大小相同。我认为我对包装容器及其样式有一些问题。

我寻找问题并尝试了很多解决方案，但还没有找到。我也添加了视频链接。

YouTube 链接

---

App.js 代码

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import BestRated from './components/BestRated';
import BottomHorizontalBoxes from './components/BottomHorizontalBoxes';




export default function App() {
  return (
    <View style={styles.container}>
      <BestRated />
      <BottomHorizontalBoxes />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    alignItems: 'left',
    justifyContent: 'center',
    marginLeft: 30,
    marginTop: 100,
  },
});

---

BestRated.js 代码

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

const BestRated = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Best Rated!</Text>
        </View>
    )
}

export default BestRated

const styles = StyleSheet.create({
    container: {
        borderBottomWidth: 1,
        width: '80%',
        marginBottom: 15,
    },

    text: {
        color: '#818181',
        width: '80%',
        fontWeight: 'bold',
    }
})

---

BottomHorizontalBoxes.js 代码

import { StyleSheet, Text, View, FlatList, SafeAreaView } from 'react-native'
import React, { useState, useEffect } from 'react'

const BottomHorizontalBoxes = () => {
const foodList = [
        {there is a long JSON data, I didn't copy it here to save rows}, 
]

const foodListWithoutFirst4 = foodList.splice(4)
    console.log(foodListWithoutFirst4);


    return (
        <View style={{ width: '100%' }}>
            <FlatList
                horizontal={true}
                showsHorizontalScrollIndicator={true}
                data={foodListWithoutFirst4}       
                keyExtractor={(item) => item.id}
                renderItem={({ item }) => {
                    return (
                        <View style={styles.itemViewContainer}>
                            <Text>{item.title}</Text>
                        </View>
                    )
                }}
            />
        </View>
    )
}

export default BottomHorizontalBoxes

const styles = StyleSheet.create({
    itemViewContainer: {
        backgroundColor: '#d9d9d9',
        alignItems: 'center',
        justifyContent: 'center',
        height: 100,
        width: '90%',
        borderRadius: 10,
    },

}
)

我尝试了 contentContainerStyle、flex:1 以及 FlatList 和 Text 容器中的其他样式。

Answer 1

（代表问题作者发布答案，将其移至答案空间。）

解决了！

我尝试了几个小时，现在我找到了解决方案。在 BottomHorizontalBoxes.js 样式中； itemViewContainer: {}，我刚刚将

width:'80%'

更改为

width: 200

，并添加了

marginRight: 20

，现在一切OK了！