反应本机；如何在 FlatList 中放置空格

Question

我正在尝试在 React Native 中构建一个平面列表，但无法防止特定列表项不接触。我尝试使用 itemSeparatorComponent 但问题仍然存在。

这是我的FlatList组件

         <View style={{ position: "absolute", bottom: -35, marginLeft: 40 }}>
            <FlatList
              horizontal
              data={this.state.hitRecords}
              renderItem={({ item }) =>  ( 
                <ArticleBox
                  title={item.title}
                  year={item.year}
                  time={item.time}
                  author={item.author}
                />
              )}
              itemSeparatorComponent = {()=> </View>}
            />
          </View>

这是我的ArticleBox组件

const styles = StyleSheet.create({
  box: {
    backgroundColor: "rgba(0.0,0.0,0.0,0.9)",
    height: 150,
    width: 300,
    alignSelf: "center",
    flex: 2,
    flexDirection: "column",
    borderRadius: 25,
    elevation: 2
  },
  layout: {
    textAlign: "center",
    color: "#FFF"
  },
  input: {
    color: "#ff8c00"
  }
});

class ArticleBox extends Component<Props> {
  render() {
    return (
      <View style={styles.box}>
        <Text style={styles.layout}>
          Time: <Text styles={styles.input}>{this.props.time}</Text>
        </Text>
        <Text />
        <Text style={styles.layout}>Publication Year: {this.props.year}</Text>
        <Text />
        <Text style={styles.layout} numberOfLines = {3} >Publication Title: {this.props.title}</Text>
        <Text />
        <Text style={styles.layout}>Author: {this.props.author}</Text>
      </View>
    );
  }
}

我正在尝试让列表表现得像这样

item item item item

但列表的行为是这样的

itemitemitemitem

Answer 1

在您的 'ArticleBox' 组件中添加 marginLeft: 12。像这样。

  box: {
   backgroundColor: "rgba(0.0,0.0,0.0,0.9)",
   height: 150,
   width: 300,
   alignSelf: "center",
   flex: 2,
   flexDirection: "column",
   borderRadius: 25,
   elevation: 2,
   marginLeft: 12
 }

反应本机；如何在 FlatList 中放置空格

React Native; How to place spaces in FlatList

react-native

react-native-flatlist