51

我正在获取产品列表，然后使用 FlatList 显示，我的列表包含 5 个项目，正如您所见，由于描述文本不同，FlatList 行高是可变的。所以问题是我的最后一个项目卡不完全可见，也许这是某种平面列表问题或布局问题。任何帮助将不胜感激

 renderProducts() {
        if (this.props.loading === true) {
            return (
                <View style={Styles.spinnerStyle}>
                    <ActivityIndicator size='large' />
                </View>
            );
        }

        return (
                <FlatList
                    data={this.props.myProducts}
                    keyExtractor={(item) => item.id}
                    renderItem={({ item }) => (
                        <Card 
                            title={item.title} 
                            image={{ 
                                uri: item.image !== null ? item.image.src :'../resImage.jpg' 
                            }}
                        >
                            <Text style={{ marginBottom: 10 }}>
                                {item.body_html}
                            </Text>
                            <Button
                                icon={{ name: 'code' }}
                                backgroundColor='#03A9F4'
                                fontFamily='Lato'
                                buttonStyle={{ borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0 }}
                                title='VIEW NOW' 
                            />
                      </Card>
                      )}
                />
        );
    }
    
    render() {
        return (
            <View>
                <View style={Styles.viewStyle}>
                    <Text style    {Styles.textStyle}>ProductsList</Text>
                </View>
                    { 
                        this.renderProducts() 
                    }
            </View>
        );
    }
4

16 回答 16

121

<FlatList>为内容容器设置底部填充：

<FlatList
    contentContainerStyle={{ paddingBottom: 20 }}
/>
于 2018-07-26T05:37:26.433 回答
58

添加{flex: 1}到包含组件的View标签Flatlist。

就我而言，

const App = () => {
  return (
    <Provider store={createStore(reducers)}>
    <View style={{ flex: 1 }}>
      <Header headerText={'My App'} />
      <ScreenTabs /> // this is my content with FlatList 
    </View>
    </Provider>
  );
};

export default App;
于 2017-12-26T09:55:16.587 回答
18

只需使用 flex:1 将其包装在视图中

<ParentView style={{flex:1}
    <View style={{flex:1}}>
    // Your flatlist
    <View>
</ParentView>

另外，请注意，包含 Flatlist 的此“视图”的每个父级也必须是 Flex 为 1 的视图。否则，您的平面列表将不可见。

于 2020-03-04T05:23:30.703 回答
14

最近更新：

react-navigation 有一个 SafeAreaView ，带有不显示底部区域的选项。

import { SafeAreaView } from 'react-navigation';
<SafeAreaView forceInset={{ bottom: 'never' }} />

旧回复如下：

您无法使用 flex: 1 看到您的列表，因为 flex: 1 会将组件增长到父级。如果父级没有 flex: 1，它将不会拉伸到其父级或屏幕。但是请记住，带有 SafeAreaView 的 flex: 1 将导致显示底部安全区域。如果您的 SafeAreaView 背景颜色与列表背景的颜色不同，这看起来会很糟糕。

我的旧解决方法是在项目数组的底部添加一个项目，但我仍在探索如何使用 FlatList 滚动过去/低于底部安全区域边距（这就是我发现这篇文章的开头）。

更新：使用 ListFooterComponent 您甚至可以创建一个带有高度和/或边距的纯白色“页脚”

例如（如果我是你，我不会直接复制和粘贴这个……肯定有更好的方法来检测无边框 iPhone，尤其是在 2019 年我们有多个 iPhone 时）

ListFooterComponent={<View style={{ height: 0, marginBottom: 90 }}></View>}

我就是这样做的，现在使用 iPhoneX 的高度。但这不是面向未来的，因为每次推出没有边框的新 iPhone 时都需要更新条件：

ListFooterComponent={<View style={{ height: 0, marginBottom: noBezels ? 90 : 0 }}></View>}

或者你可以总是在底部留一些间距，比如加载 gif、一条消息……随便什么。

更新 2：

我发现了 react-native-device-info 它有一个 hasNotch() 方法。通过将 hasNotch() 与 Platform.OS === 'ios' 结合使用，我发现这对于没有边框的 iPhone 的样式很有用

于 2018-05-05T20:15:42.433 回答
13

使用FlatList的 contentContainerStyle 道具

<FlatList contentContainerStyle={{ paddingBottom: 20}} />
于 2019-08-18T10:43:07.823 回答
12

你可以试试这个解决方案

对于Vertical FlatList：

<FlatList
 ListFooterComponent={<View />}
 ListFooterComponentStyle={{height:200}}
/>

对于Horizontal FlatList：

<FlatList
  contentContainerStyle={{paddingRight:40}}
/>
于 2020-07-09T05:39:49.543 回答
9

对于 IOS 问题，您可以应用一些 IOS 特定的道具：

<FlatList
  // ...
  contentInset={{top: 0, bottom: 20, left: 0, right: 0}}
  contentInsetAdjustmentBehavior="automatic"
  // ...  
/>

在我的情况下，使用填充的解决方案contentContainerStyle似乎并不是修复安全区域 IOS 问题的最佳整体。

于 2019-07-03T15:44:46.337 回答
1

在 flatlist 中使用 contentContainerStyle 属性 <FlatList contentContainerStyle={{paddingBottom: 10}} />

于 2020-06-30T15:28:21.297 回答
1

为我工作得很好

<FlatList
  data={data}
  contentContainerStyle={{ paddingBottom: 30 }}
  style={{height: '95%'}}
  renderItem={({ item, index }) => (
    <ListItem item={item} onPress={() => handlePress(item, index)} />
  )}
/>
于 2021-03-26T20:30:16.293 回答
0

@krish 解决方案非常适合固定大小的列表项，但是正如@Neeraj Sewani 所说，它可能不适合动态大小的列表项。

所以你可以像这样解决问题 - 如果方向是列 - ：

<View  style={{height: '90%'}}> 
<FlatList/> 
</View>

否则，-如果方向是行-：

<View  style={{height: '90%', width:'90%'}}> 
<FlatList/> 
</View>
于 2021-09-08T09:15:08.083 回答
0

这对我有用。

<View style={{flex: 1}}>
    <FlatList
      style={{flex: 1}}
      data={data}
      renderItem={({item}) => (
        <ListItem item={item} onPress={() => handlePress(item)} />
      )}
    />
  </View>
于 2020-11-10T09:33:27.700 回答
0

我有同样的问题并找到了解决方案。要解决此问题，只需style={{flex: 1}}为每个 View 元素添加FlatList.

请参阅下面的更新代码。

    render() {
        return (
            <View style={{flex: 1}}> // Here you should add style as {flex: 1}
                <View style={Styles.viewStyle}>
                    <Text style={Styles.textStyle}>ProductsList</Text>
                </View>
                { this.renderProducts() }
            </View>
        );
    }
于 2022-02-20T15:50:24.817 回答
0

我在我们的 Android + iOS React Native 混合应用程序中看到了同样的问题。我们将 FlatList 组件嵌入到 Android 的 Fragment 中的原生 UI 中，我们无法滚动到列表中的最后一项，即使滚动指示器会显示还有更多要滚动，但 ScrollView 根本不会滚动。我尝试了使用包装<View style={{flex:1}}>来包装 FlatList 以及在 FlatList上使用的所有组合，contentContainerStyle={{flexGrow:1}}但均未成功。进一步追查发现 FlatList 在 Android 上需要一个绝对的、预定义的高度以允许滚动到底部——它在 iOS 上工作得很好，但在 Android 上使用match_parent却行不通。由于我们也需要支持所有类型的设备、手机和平板电脑，因此也不可能预先定义绝对高度。

为了解决这个问题，我创建了一个自定义FrameLayout子类来容纳 ReactRootView 的片段，它覆盖onLayout()以忽略子视图测量，强制视图具有 FrameLayout 的精确尺寸，有点像 Kotlin 中的这样：

class StretchFrameLayout @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        for (child in children){
            if (child.visibility == View.GONE) continue
            child.updateLayoutParams {
                this.width = measuredWidth
                this.height = measuredHeight
            }
            if (needsRelayout){
                handler.postDelayed({child.requestLayout()},1)
            }
        }
        super.onLayout(changed, left, top, right, bottom)
    }
}
于 2020-07-08T19:17:35.110 回答
0

我已经解决了contentInset={{ bottom: data.length * itemStyle.height, }}50itemStyle.height的问题。

于 2021-05-11T23:15:41.897 回答
0

对于动态平面列表，您可以将高度分配给父视图。我用同样的方法解决了它。

<View style={{height:'80%'}}>
  <Flatlist
    extraData={data}
    data={data}
    renderItem={renderItem}
  />
</View>
于 2022-01-30T08:14:19.217 回答
0

这在我的情况下非常有效：

  <FlatList
    data={todos}
    contentContainerStyle={{ height: '100%' }}
    renderItem={({ item }) => <Todos items={item} pressed={pressed} />}
  />
于 2021-04-13T20:50:12.230 回答