我试图创建一个水平FlatList,周围有一些间距.我可以在列表中正确地使用paddingLeft开头的间距,但是列表中的paddingRight后面似乎没有任何空格(如果我一直滚动到最后,最后一个项目就被压到了边框上).

这里有一个小吃,你可以跑go 现场试一试:https://snack.expo.io/@saadq/aW50cm

这是我的代码:

import * as React from 'react';
import { Text, View, FlatList, StyleSheet } from 'react-native';

const data = [{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }];

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={styles.flatList}
          horizontal
          data={data}
          renderItem={() => (
            <View style={styles.box}>
              <Text>Box</Text>
            </View>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  flatList: {
    marginTop: 100,
    paddingLeft: 15,
    paddingRight: 15, // THIS DOESN'T SEEM TO BE WORKING
    // marginRight: 15   I can't use marginRight because it cuts off the box with whitespace
  },
  box: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
    width: 100,
    borderWidth: 1,
    borderColor: 'black',
    paddingHorizontal: 15,
    marginRight: 15,
  },
});

export default App;

使用marginRight而不是paddingRight似乎确实会产生预期的间距结果,但它会导致另一个问题,即空格始终存在,并在滚动时切断项目.任何帮助都将不胜感激!

推荐答案

似乎我可以通过在FlatList上使用contentContainerStyleprops 来修复它,而不是直接将styleprops 传递给它.

React-native相关问答推荐

Redux toolkit通过按钮操作进行查询

React Native在同一页面上使用多个不同的导航器

为什么当我更换屏幕时playground 音乐不会停止?

在 React Native 中使用 Flatlist scrollView 时的模式关闭

为什么当键盘出现在react native 时我的按钮会上升?按钮视图位置是绝对的?

React Native - 如何在从另一个屏幕导航后将 ScrollView 滚动到给定位置

React Native WebView onMessage 没有做任何事情

Eslint 错误,configuration for rule "import/no-cycle" is invalid

更改所选标签栏元素的底部边框 colored颜色

请求无法完成,因为您已超出配额

redux-observable Promise 在单元测试中没有得到解决

api.get(...).then(...).catch(...).finally 不是函数

Test suite无法运行 TypeError:Cannot read property ‘default’ of undefined

react native图像不适用于特定 URL

使用 React Native 打开 iOS iPad 模拟器

带有 xcode 模拟器的 react-native 有非常慢的alert

使用 expo SDK react-native ios 应用程序的 Info.plist 文件

如何将时刻日期转换为字符串并删除时刻对象

zoom 到指定的标记 react-native-maps

如何在本机代码(Java、ObjectiveC/Swift)中读取 AsyncStorage