react-native - FlatListに「もっと見る」ボタンを追加しますか?

Question

flatList を使用して要素のリストを作成します。15個の要素を表示してから、「もっと見る」ボタンを追加して次の15個などを表示したいと思います. -more-data-dynamically-infinite-list/ しかし、フェッチを使用する必要はありません。既にデータ (state.listData) をセットアップしており、実際、それを適応させる方法について少し迷っています.. .

誰かが私を少し助けてくれるのではないかと思いました。どうもありがとう

   this.state = {
      selectedId: '',
      setSelectedId:'',
      listData:''
    }
  };


  renderItem = ({ item }) => {
    const backgroundColor = item.id === this.selectedId ? "transparent" : "fff";

    return (
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
        <Item
          item={item}
          onPress={() => this.props.navigation.navigate('UpdateTripsForm')}
          style={{ backgroundColor }}
        />
        <Image source={require("../../assets/images/arrow.png")} style={{width: 15, height:15, justifyContent: 'center'}}/>
      </View>
    );
  };

  initListData = async () => {
    let list = await getFlights(0);

    if (list) {
      this.setState({
        listData: list
      });
    }
  };

render() {
    return (
            <SafeAreaView style={styles.container}>
              <FlatList
                data={this.state.listData}
                renderItem={this.renderItem}
                maxToRenderPerBatch={15}
                keyExtractor={(item) => item.id}
                extraData={this.selectedId}
              />
              <TouchableOpacity
                style={styles.touchable2}
                onPress={() => this.props.navigation.goBack()}
              >
                <View style={styles.view2}>
                  <Text style={styles.textimg2}>
                    {i18n.t("tripsform.action.back")}
                  </Text>
                </View>
                <Image
                  source={require("../../assets/images/btn-background.png")}
                  style={styles.tripsimg2}
                />
              </TouchableOpacity>
            </SafeAreaView>
    );
  };
}

@Pramod の答えのおかげでこれを試しました：

const Item = ({ item, onPress, style }) => (
  <TouchableOpacity onPress={onPress} style={[styles.flightsListitem, style]}>
    <Text style={styles.h4}>{item.id}</Text>
  </TouchableOpacity>
);

export default class FlightsList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedId: '',
      setSelectedId:'',
      listData:'',
      page:1,
      perPage:2,
      loadMoreVisible:true,
      displayArray:[]
    }
  };


  renderItem = ({ item }) => {
    const backgroundColor = item.id === this.selectedId ? "transparent" : "fff";

    return (
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
        <Item
          item={item}
          onPress={() => this.props.navigation.navigate('UpdateTripsForm')}
          style={{ backgroundColor }}
        />
        <Image source={require("../../assets/images/arrow.png")} style={{width: 15, height:15, justifyContent: 'center'}}/>
      </View>
    );
  };

  initListData = async () => {
    let list = await getFlights(0);

    if (list) {
      this.setState({
        listData: list
      });
    }
  };

  componentDidMount(){
      this.setNewData()
      // console.log(tempArray)
    }

    setNewData(){
      var tempArray=[]
      if(this.state.listData.length == this.state.displayArray.length){
        this.setState({
          loadMoreVisible:false
        })
      }else{
         for(var i=0; i<(this.state.page*this.state.perPage); i++){
        tempArray.push(this.state.listData)
        }
        this.setState({
          displayArray: tempArray,
          loadMoreVisible:true
        })
      }
    }

  loadMore(){
    this.setState({
      page: this.state.page+1
    },()=>{
      this.setNewData()
    })
  }

  async UNSAFE_componentWillMount() {
    this.initListData();
  }

  render() {
    return (
      <ImageBackground
        source={require("../../assets/images/background.jpg")}
        style={styles.backgroundImage}
      >
        <Header
          backgroundImage={require("../../assets/images/bg-header.png")}
          backgroundImageStyle={{
            resizeMode: "stretch",
          }}
          centerComponent={{
            text: i18n.t("mytrips.title"),
            style: styles.headerComponentStyle,
          }}
          containerStyle={[styles.headerContainerStyle, { marginBottom: 0 }]}
          statusBarProps={{ barStyle: "light-content" }}
        />
          <SafeAreaView style={styles.container}>
              <FlatList
                data={this.state.displayArray}
                renderItem={this.renderItem}
                keyExtractor={(item) => item.id}
                extraData={this.selectedId}
              />
            {this.state.loadMoreVisible == true?
                <Button style={{width:'100%', height:10, backgroundColor:'green', justifyContent:'center', alignItems:'center'}}
                        title = 'load more'
                        onPress={()=>{this.loadMore()}}>
                </Button>:null}
              <TouchableOpacity
                style={styles.touchable2}
                onPress={() => this.props.navigation.goBack()}
              >
                <View style={styles.view2}>
                  <Text style={styles.textimg2}>
                    {i18n.t("tripsform.action.back")}
                  </Text>
                </View>
                <Image
                  source={require("../../assets/images/btn-background.png")}
                  style={styles.tripsimg2}
                />
              </TouchableOpacity>
            </SafeAreaView>
      </ImageBackground>
    );
  };
}

フラットリストは表示されません:私は得る: