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

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

设置下边距

 <FlatList

 contentContainerStyle={{ paddingBottom: 20}}

 />

Answer 2

将{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 3

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

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

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

Answer 4

你可以试试这个解决方案

对于Vertical FlatList：

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

对于Horizontal FlatList：

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

Answer 5

@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造型非常有用

Answer 6

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

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

contentContainerStyle在我的案例中，带有填充的解决方案似乎并不是解决安全区域 IOS 问题的最佳整体。

Answer 7

对我来说工作得很好

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

Answer 8

使用FlatList的contentContainerStyle道具

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