Question

我正在获取产品列表，然后使用平面列表显示，我的列表包含5个项目，因为您可以看到由于不同的描述文本，平面列表行高度是可变的。所以问题是我的最后一项卡片不完全可见，这可能是某种平面列表问题或布局问题。任何帮助都将受到高度赞赏

 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>
        );
    }

Answer 1

将{flex：1}添加到包含 Flatlist 组件的View标记。

就我而言，

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;

Answer 2

设置下边距

 <FlatList

 contentContainerStyle={{ paddingBottom: 20}}

 />

Answer 3

@Christian（我无法发表评论，因为我的声誉太低）你无法看到你的列表与flex：1因为flex：1会将组件增加到父级。如果父级没有flex：1，则它不会伸展到其父级或屏幕。但请记住，使用SafeAreaView的flex：1将导致显示底部安全区域。如果您的SafeAreaView backgroundColor与列表的背景颜色不同，这将看起来很糟糕。

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

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

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

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

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

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

或者你可以在底部总是有一些间距，比如加载gif，消息......等等。

更新

我发现了有一个hasNotch（）方法的react-native-device-info。我发现通过将hasNotch（）与Platform.OS ==='ios'

结合起来，对于没有挡板的iPhone造型非常有用

更新（再次）*

我知道这是一个偏离主题但是......

react-navigation有一个SafeAreaView，可以选择不显示底部区域。

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

Answer 4

只需将其包装在带有flex：1的视图中

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

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

Answer 5

您可以尝试此解决方案

对于Vertical FlatList：

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

对于Horizontal FlatList：

<FlatList
  contentContainerStyle={{paddingRight:40}}
/>

Answer 6

使用FlatList的 contentContainerStyle 道具

<FlatList contentContainerStyle={{ paddingBottom: 20}} />

Answer 7

在单位列表中使用contentContainerStyle道具 <FlatList contentContainerStyle={{paddingBottom: 10}} />

Answer 8

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

<img alt="'+g+'" src="'+k +'"/>

使用contentContainerStyle填充的解决方案似乎并不是解决安全区域IOS问题的最佳方法。

Answer 9

我在我们的Android + iOS React Native混合应用程序中看到了同样的问题。我们将FlatList组件嵌入到Android的Fragment中的本机UI中，并且无法滚动到列表的最后一项，即使滚动指示符表明还有更多滚动内容，ScrollView也不会进一步滚动。我尝试了使用包装<View style={{flex:1}}>包装FlatList以及在FlatList上使用contentContainerStyle={{flexGrow:1}}的所有组合，但均未成功。进一步寻找线索，结果证明FlatList需要在Android上具有绝对的预定义高度以允许滚动到底部-在iOS上工作正常，但在使用match_parent的Android上将无法工作。由于我们还需要支持所有类型的设备，包括电话和平板电脑，因此也无法预先定义绝对高度。

为解决此问题，我制作了一个自定义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)
    }
}

Answer 10

这对我有用。

<View style={{flex: 1}}>
    <FlatList
      style={{flex: 1}}
      data={data}
      renderItem={({item}) => (
        <ListItem item={item} onPress={() => handlePress(item)} />
      )}
    />
  </View>

Answer 11

非常适合我

<FlatList
  data={data}
  contentContainerStyle={{ paddingBottom: 30 }}
  style={{height: '95%'}}
  renderItem={({ item, index }) => (
    <ListItem item={item} onPress={() => handlePress(item, index)} />
  )}
/>

Answer 12

这对我来说效果很好：

  <FlatList
    data={todos}
    contentContainerStyle={{ height: '100%' }}
    renderItem={({ item }) => <Todos items={item} pressed={pressed} />}
  />

Answer 13

我已经通过 contentInset={{ bottom: data.length * itemStyle.height, }} 解决了它，itemStyle.height 为 50 工作正常。

反应原始flatlist最后一项可见性问题

13 个答案: