react-native - 如何在水平 `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>
  )
}