List miss line in certain circumstances

[gengjiawen]

Version

2.1.3

Environment

react-native 0.51.0

Reproduction link

https://github.com/gengjiawen/AntDesignBug

Steps to reproduce

for more detail see the repo

  render() {
    const cmps = [
      <Item key="cwd" arrow="horizontal" onClick={() => console.log('2')}>忘记密码 </Item>,
      <Item key="heihei" arrow="horizontal" onClick={() => console.log('3')}>修改密码 </Item>
    ]

    return (
      <View style={styles.container}>

        <List>
          <Item arrow="horizontal" onClick={() => console.log('1')}>收支明细</Item>
        </List>

        <View style={{height: 10}} />

        <List>
          <Item arrow="horizontal" onClick={() => console.log('1')}>提现账户 </Item>
          {cmps.map(comp => comp)}
        </List>
      </View>
    );
  }

What is expected?

between item has line

What is actually happening?

lost some line.

If previous has a single kid, it will result in the second list miss some line

<List>
      <Item arrow="horizontal" onClick={() => console.log('1')}>提现账户 </Item>
</List>

[gengjiawen]

Actually middle view height to 20, the line appeared again.

<View style={{height: 20}} />

[gengjiawen]

@paranoidjk Any plan to investigate this ?

[warmhug]

The issue of view height ? @paranoidjk any solution to this problem?

[warmhug]

Close for ant-design/ant-design-mobile#2556 (comment)