如何在水平`FlatList`上显示垂直分隔符？

Question

我正在使用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;

Answer 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>
  )
}