React Native FlatList BUG?

时间:2017-11-22 03:43:31

标签: react-native react-native-flatlist

我想在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

1 个答案:

答案 0 :(得分:1)

尝试

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

    RTFooter.propTypes = {

    };

export default RTFooter;

页脚在哪里

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

页脚应该是类

另一种选择是使用箭头功能(更好)

 ListFooterComponent={this.renderFooter}

然后

$result = \Yii::$app->db->createCommand("exec login_access @username = :username, @password = :password") 
                  ->bindValue(':username' , $username)
                  ->bindValue(':password', $password)
                  ->execute();