android - react native FlatList scrollToBottom 不工作

Question

大家好

我正在研究 react-native FlatList，我的问题是我无法滚动到底部。这是我的 FlatList 代码:

<FlatList style = { styles.list }
  ref="flatList1"
  data = {
    this.state.conversation_arr
  }
  onContentSizeChange={(contentWidth, contentHeight) => {
    this.flat_list_height = contentHeight;
    // this.scrollNow();
  }}
  onLayout={this.scrollNow()}
  renderItem = { this._renderItem }
  keyExtractor = { item => item.message_id }
/>

scrollNow() {
  console.log("******",this.refs);
  if(this.refs.flatList1){
    this.refs.flatList1.scrollToEnd();
  }
}

当代码到达

this.refs.flatList1.scrollToEnd();

错误出现在屏幕上说

Type Error, cannot read property -1 of undefined.

这是截图。

cannot read property -1 of undefined我基本上是在尝试为我的应用程序实现聊天功能，因此我需要在加载聊天后滚动到列表底部。

感谢任何形式的帮助。谢谢

完整代码

import React, {
    Component
} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TextInput,
    ActivityIndicator,
    TouchableOpacity,
    FlatList,
} from 'react-native';

export default class Conversation extends Component {

state = {
    conversation_arr: undefined,
    last_message_loaded: false,
    show_activty_indicator: true,
    message_text : undefined,
    message_text_length : 0
};


params = this.props.navigation.state;

last_evaluated_key = {
    message_id: undefined,
    timestamp: undefined
}
conversation = undefined;
thread_info = undefined;
flat_list_height = 0;


static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params.header_title,
});

constructor(props) {
    super(props);

    this._renderItem = this._renderItem.bind(this);
    this._fetchConversation();
    this.scrollNow = this.scrollNow.bind(this);
    this.handleInputTextContent = this.handleInputTextContent.bind(this);
    this.sendMessage = this.sendMessage.bind(this);

    console.disableYellowBox = true;

    this.thread_info = this.params.params.thread_info;
}

// scrollNow() {
    // console.log("******",this.refs);
    // if(this.refs.flatList1){
    //     // debugger;
    //     this.refs.flatList1.scrollToEnd();
    // }

    // console.log("******", this.flatlist1);
    // if(this.flatlist1){
    //     this.flatlist1.scrollToEnd();
    // }
    // console.log("###", this.flat_list_height);
// }
scrollNow = () => {
    console.log("******", this.flatList1);
    if(this.state.conversation_arr && this.state.conversation_arr.length > 0 && this.flatList1){
        // debugger;

        // setTimeout(() => {
            // console.log("timer over now");
            this.flatList1.scrollToEnd();
        // }, 1000)

        // this.flatList1.scrollToEnd();
        console.log("Scrolling now at length", this.state.conversation_arr.length);

    }



    // !!this.refs["myFlatList"] && this.refs["myFlatList"].scrollToEnd()

}

componentDidUpdate(){
    console.log("componentDidUpdatecomponentDidUpdate")
}

componentWillUnmount(){
    console.log("componentWillUnmountv")
}

render() {
    return (
        <View style={ styles.container }>
            {   
                this.state.show_activty_indicator &&
                <View style={[styles.activity_indicator_container]}>
                    <ActivityIndicator
                        animating = { this.state.show_activty_indicator }
                        size="large"
                        color="#444444" 
                    />
                </View>
            }
            <FlatList style = { styles.list }
                // inverted
                // ref="myFlatList"
                // ref={(ref) => this.flatList1 = ref}
                ref={(ref) => { this.flatList1 = ref; }}
                data = {
                    this.state.conversation_arr
                }
                onContentSizeChange={(contentWidth, contentHeight) => {
                    this.flat_list_height = contentHeight;
                    // this.scrollNow();
                }}
                onLayout={this.scrollNow}
                renderItem = { this._renderItem }
                keyExtractor = { item => item.message_id }
            />

            <View style={ styles.bottom_box }>
                <Text style={ styles.message_length }> {this.state.message_text_length}/160 </Text>
                <View style={ styles.message_box }>
                    <View style={{flex: 3}} >
                        <TextInput
                            style={styles.input_text}
                            value={this.state.message_text}
                            onChangeText={this.handleInputTextContent}
                            placeholder='Type a message here...'
                            underlineColorAndroid='transparent'
                        />
                    </View>
                    <View style={{flex: 1}} >
                        <TouchableOpacity
                            style={styles.send_button} 
                            onPress={this.sendMessage} >
                                <Text style={[styles.label_send]}>SEND</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </View>
    );

}

handleInputTextContent(text){

    if(text.length > 160){
        text = text.substring(0,159)
        this.setState({ message_text : text });
    } else {
        this.setState({ message_text : text });
        this.setState({ message_text_length : text.length });
    }
}

sendMessage(){
    console.log(this.state.message_text);
    if(this.state.message_text && this.state.message_text.length > 0) {
       console.log("Send message now");
    }
}

_renderItem(item, index){
    // console.log(item.item);
    item = item.item;

    let view = (
            <Text style = { [styles.msg_common] }> { item.message_content } </Text>
        )

    return   view ;
}

processPaymentMessages(dataArr) {
    return dataArr;
}

_fetchConversation() {

            new WebApi().fetchThreadConversation().then(result => {
                console.log("resutlresult", result);

                if (result && result.data && result.data.LastEvaluatedKey) {

                    this.last_evaluated_key.message_id = result.data.LastEvaluatedKey.message_id;
                    this.last_evaluated_key.timestamp = result.data.LastEvaluatedKey.timestamp;

                } else {
                    this.setState({
                        last_message_loaded: true
                    });
                    this.last_evaluated_key = null;
                }

                if (!this.conversation) {
                    this.conversation = [];
                }


                for (let i = 0; i < result.data.Items.length; i++) {

                        item = result.data.Items[i];
                        this.conversation.push(item);
                }

                // console.log(this.conversation);
                this.setState({ conversation_arr : this.conversation });
                this.setState({ show_activty_indicator : false });

                console.log(this.state.conversation_arr.length);


            }, error => {
                console.log("web api fetch data error", error);
            })
    }
}
    const styles = StyleSheet.create({
        activity_indicator_container: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
container: {
    flex: 1,
    paddingTop: 8,
    backgroundColor:"#fff"
},

list : {
    paddingLeft: 8,
    paddingRight:8,
    marginBottom : 85,
},

gray_item: {
    padding: 10,
    height: 44,
    backgroundColor:"#fff"
},
white_item : {
    padding: 10,
    height: 44,
    backgroundColor:"#f5f5f5"
},

msg_common : {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
},
colored_item_common : {
    padding : 12,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'

}, 
item_insider_common : {
    backgroundColor:"#fff",
    fontSize : 16,
    padding : 12,
    borderWidth : 1,
    borderRadius : 8,
    width : "90%",
    fontWeight : "bold",
    textAlign: 'center',

},
purple_item_insider : {
    color : "#7986cb",
    borderColor: "#7986cb",

}, 
green_item_insider : {
    color : "#66bb6a",
    borderColor: "#66bb6a",

},

bottom_box:{
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    flex: 1,
},
message_length: {
    height : 20,
    textAlign: 'right', alignSelf: 'stretch'
},
message_box: {
    // position: 'absolute',
    // left: 0,
    // right: 0,
    // bottom: 0,
    flex: 1, 
    flexDirection: "row"
},

input_text: {
    width: '100%',
    height: 60,
    color: '#000',
    backgroundColor:"#eee",
    padding: 16,
},
send_button: {
    alignItems: 'center',
    flex: 1, 
    height: 60,
    padding: 16,
    backgroundColor : '#f1592b'
},
label_send: {
    color: '#fff'
}
  })

Answer 1

你需要像这样给 onLayout 一个回调:

onLayout={this.scrollNow}

更新后的代码是:我试过了。它有效。

import React, { Component } from 'react';
import { FlatList, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <FlatList
        ref={(ref) => { this.flatList1 = ref; }}
        data={[0, 0, 0, 0, 0, 0, 0, 0]}
        onContentSizeChange={(contentWidth, contentHeight) => { this.flat_list_height = contentHeight; }}
        onLayout={this.scrollNow}
        renderItem={this.renderItem}
        keyExtractor={item => item.message_id}
      />
    );
  }
  renderItem =() => <Text style={{marginTop: 100}}>Just Some Text</Text>
  scrollNow =() => {
    if (this.flatList1) {
      this.flatList1.scrollToEnd();
    }
  }
}