反应本机flatlist错误

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/reaectnativeflatlistdemo

Answer 1

尝试

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

页脚是

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

页脚应为班级

另一个选项是使用箭头功能（更好）

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

，然后

 ListFooterComponent={this.renderFooter}