React native 如何在水平“平面列表”上显示垂直分隔符？

我正在使用React Native的新平面列表组件。我用它来表示一个水平列表，但是当使用内置的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;

这是一个尚未修复的本地bug。您可以将代码重写为blow来解决此问题：

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

这是一个尚未修复的本地bug。您可以将代码重写为blow来解决此问题：

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

---

放置渲染器、renderRow和RenderOperator的代码。你希望我们如何知道你的问题？请用你的代码更新你的问题。@KhalilKhalaf，我用相关的代码更新了问题code@VahidBoreiri-我补充说我很担心Hight:100的问题，你能不能也增加一个打印屏幕？你是否也有很多项目，并且必须使用平面列表？为什么不使用listView？请输入渲染器、renderRow和RenderOperator的代码。你希望我们如何知道你的问题？请用你的代码更新你的问题。@KhalilKhalaf，我用相关的代码更新了问题code@VahidBoreiri-我补充说我很担心Hight:100的问题，你能不能也增加一个打印屏幕？你是否也有很多项目，并且必须使用平面列表？为什么不是listView？瓦希德，是的，这就是我的想法。非常感谢。很高兴帮助你。瓦希德，只是一个小错误：a在这之后丢失了。RenderOperator.瓦希德，是的，这就是我的想法。非常感谢。很高兴能帮助你。瓦希德，只是一个小错误：a在这之后丢失了。RenderOperator。