如何在水平的“FlatList”上显示垂直分隔符？答案

【问题标题】：How to present vertical separators on a horizontal `FlatList`?如何在水平的“FlatList”上显示垂直分隔符？
【发布时间】：2017-09-07 19:00:42
【问题描述】：

我正在使用 React Native 的新 FlatList 组件。我正在使用它来呈现一个水平列表，但是当使用内置的ItemRenderComponent 时，它会在每个项目下方而不是在它们之间显示分隔符。

有办法改变吗？

 interface State {
dataSource: WhosOutByPolicy[];
}

interface Props {
 data: WhosOutByPolicy[];
}

class WhosOutParentCell extends Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = { dataSource: props.data };
}

renderSeparator = () => {
    return (
        <View
            style={{
                height: 100,
                width: 3,
                backgroundColor: "#D81458"
            }}
        />
    );
};

render() {
    return (
        <View style={styles.container}>
            <FlatList
                data={this.state.dataSource}
                horizontal={true}
                renderItem={({ item }) => (
                    <WhosOutUsersInPolicyCell data={item} />
                )}
                keyExtractor={item => item.policyDispalyName}
                ItemSeparatorComponent={this.renderSeparator}
            />
        </View>
    );
   }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#EFEFEF"
}
});

export default WhosOutParentCell;

【问题讨论】：

为您的渲染、renderRow 和 renderSeperator 放置代码。您希望我们如何知道您的问题？？
请用您的代码更新您的问题。
@KhalilKhalaf，我用相关代码更新了问题
@VahidBoreiri - 我添加了它
我担心 hieght:100 的东西，你也可以添加一个打印屏幕吗？你还有很多物品和“有”使用平面列表吗？为什么不使用 listView？

标签： react-native react-native-flatlist

【解决方案1】：

这是一个尚未修复的react-native 错误。你可以重写你的代码来解决这个问题：

renderSeparator = () => {
    return (
      <View
        style = {{
          height: 100,
          width: 3,
          backgroundColor: '#D81458'
        }}
      />
    )
  }         

_renderItem = ({item, index}) => (
  <View style={{flexDirection: 'row'}}>
    <WhosOutUsersInPolicyCell data = { item } />
    {(index !== this.state.dataSource.length - 1) && this.renderSeparator()}
  </View>
)

render() {
  return (
    <View style = { styles.container } >
      <FlatList
        data = { this.state.dataSource }
        horizontal = { true }
        renderItem = {this._renderItem}
        keyExtractor = { item => item.policyDispalyName }
      />
    </View>
  )
}

【讨论】：

瓦希德，是的，这就是我的想法。谢谢！
很高兴为您提供帮助。
Vahid，只是一个小错字：() 在this.renderSeperator 之后丢失。