React Native FlatList BUG？

Question

我想在FlatList中渲染一个页脚，但遇到了一些奇怪的问题：

 constructor(props) {
    super(props);
    // bind this for these 4 functions, cause FlatList footer can not be render
    this._renderFooter=this._renderFooter.bind(this)
    this._onEndReached=this._onEndReached.bind(this)
    this._separator = this._separator.bind(this)
}

FlatList：

<FlatList
    data={this.state.dataArray}
    renderItem={this._renderItemView}

    ListFooterComponent={this._renderFooter}
    onEndReached={this._onEndReached}
    onEndReachedThreshold={1}
    ItemSeparatorComponent={this._separator}
    // BUG here: above functions which has been bind this in component constructor, FlatList Footer would not render

    // // below functions called bind this here, FlatList Footer renders fun
    // ListFooterComponent={this._renderFooter.bind(this)}
    // onEndReached={this._onEndReached.bind(this)}
    // onEndReachedThreshold={1}
    // ItemSeparatorComponent={this._separator.bind(this)}
/>

如果我将所有这些函数绑定调用都放在构造函数中，FlatList就不能像预期的那样用_renderFooter函数呈现它的页脚。

演示项目：https://github.com/xilibro/ReactNativeFlatListDemo

Answer 1

试一试

            ListFooterComponent={<Footer {...this.props}/>}

页脚的位置

    const RTFooter = (props) =>{
        return(
            <View>
                <Text>Hello</Text>
            </View>
        );
    };

    RTFooter.propTypes = {

    };

export default RTFooter;

页脚应为class

另一种选择是使用箭头函数(更好)

 renderFooter = () =>{
    return(<View/>);
    }

然后

 ListFooterComponent={this.renderFooter}