Antd-mobile ListView is used with TabBar components and does not load

I want to use ListView with TabBar.
the demo, on the official website shows that ListView cannot be loaded.
after testing, it is found that it should be caused by the outermost

, and the outermost
is for tabbar to be placed at the front end of
beginners at the bottom of the page.

the code is as follows:

const data = [
    {
        img: "https://img.codeshelper.com/upload/img/2021/03/02/llvwwrmdm4l2162.png",
        title: "Meet hotel",
        des: "",
    },
    {
        img: "https://img.codeshelper.com/upload/img/2021/03/02/54qpuzgv2sw2163.png",
        title: "McDonald\"s invites you",
        des: "",
    },
    {
        img: "https://img.codeshelper.com/upload/img/2021/03/02/gfyvbaqqy242164.png",
        title: "Eat the week",
        des: "",
    },
];
const NUM_ROWS = 20;
let pageIndex = 0;

function genData(pIndex = 0) {
    const dataBlob = {};
    for (let i = 0; i < NUM_ROWS; iPP) {
        const ii = (pIndex * NUM_ROWS) + i;
        dataBlob[`${ii}`] = `row - ${ii}`;
    }
    return dataBlob;
}

class Demo extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });

        this.state = {
            dataSource,
            isLoading: true,
        };
    }

    componentDidMount() {
        // you can scroll to the specified position
        // setTimeout(() => this.lv.scrollTo(0, 120), 800);

        // simulate initial Ajax
        setTimeout(() => {
            this.rData = genData();
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                isLoading: false,
            });
        }, 600);
    }

    // If you use redux, the data maybe at props, you need use `componentWillReceiveProps`
    // componentWillReceiveProps(nextProps) {
    //   if (nextProps.dataSource !== this.props.dataSource) {
    //     this.setState({
    //       dataSource: this.state.dataSource.cloneWithRows(nextProps.dataSource),
    //     });
    //   }
    // }

    onEndReached = (event) => {
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        console.log("reach end", event);
        this.setState({ isLoading: true });
        setTimeout(() => {
            this.rData = { ...this.rData, ...genData(PPpageIndex) };
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                isLoading: false,
            });
        }, 1000);
    }

    render() {
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    backgroundColor: "-sharpF5F5F9",
                    height: 8,
                    borderTop: "1px solid -sharpECECED",
                    borderBottom: "1px solid -sharpECECED",
                }}
            />
        );
        let index = data.length - 1;
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = data.length - 1;
            }
            const obj = data[index--];
            return (
                <div key={rowID} style={{ padding: "0 15px" }}>
                    <div
                        style={{
                            lineHeight: "50px",
                            color: "-sharp888",
                            fontSize: 18,
                            borderBottom: "1px solid -sharpF6F6F6",
                        }}
                    >{obj.title}</div>
                    <div style={{ display: "-webkit-box", display: "flex", padding: "15px 0" }}>
                        <img style={{ height: "64px", marginRight: "15px" }} src={obj.img} alt="" />
                        <div style={{ lineHeight: 1 }}>
                            <div style={{ marginBottom: "8px", fontWeight: "bold" }}>{obj.des}</div>
                            <div><span style={{ fontSize: "30px", color: "-sharpFF6E27" }}>{rowID}</span></div>
                        </div>
                    </div>
                </div>
            );
        };
        return (

            <div style={{ position: "fixed", height: "100%", width: "100%", top: 0 }}>
                <TabBar
                    unselectedTintColor="-sharp929292"
                    tintColor="-sharpff0000"
                    barTintColor="-sharpf7f7f7"
                >
                    <TabBar.Item
                        title=""
                        key="Home"
                        icon={
                            <i className="iconfont icon-5gouwudai2" />
                        }
                        selectedIcon={
                            <i className="iconfont icon-5gouwudai2" />
                        }
                        selected={this.state.selectedTab === "homeTab"}
                        onPress={() => {
                            this.setState({
                                selectedTab: "homeTab",
                            });
                        }}
                    >
                        <ListView
                            ref={el => this.lv = el}
                            dataSource={this.state.dataSource}
                            renderHeader={() => <span>header</span>}
                            renderFooter={() => (<div style={{ padding: 30, textAlign: "center" }}>
                                {this.state.isLoading ? "Loading..." : "Loaded"}
                            </div>)}
                            renderRow={row}
                            renderSeparator={separator}
                            className="am-list"
                            pageSize={4}
                            useBodyScroll
                            onScroll={() => { console.log("scroll"); }}
                            scrollRenderAheadDistance={500}
                            onEndReached={this.onEndReached}
                            onEndReachedThreshold={10}
                        />
                    </TabBar.Item>

                    <TabBar.Item
                        title=""
                        key="Mine"
                        icon={
                            <i className="iconfont icon-gerenzhongxin" />
                        }
                        selectedIcon={
                            <i className="iconfont icon-gerenzhongxin" />
                        }
                        selected={this.state.selectedTab === "mineTab"}
                        onPress={() => {
                            this.setState({
                                selectedTab: "mineTab",
                            });
                        }}
                    >
                        {/*  */}
                        
                    </TabBar.Item>
                </TabBar>
            </div>

        );
    }
}

ReactDOM.render(<Demo />, document.getElementById("root"));
Mar.02,2021

you change ref= {el = > this.lv = el} to ref= {el = > {this.lv = el; return this.lv}}. If you put it in TabBar, ListView should use a custom container, not body.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b309b3-2bd41.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b309b3-2bd41.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?