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。这样。

delete

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

1 个答案: