フラットリストの中に3つのアイテムしかレンダリングしない

Question

FlatListの中に私のアイテムのうちの3つだけをレンダリングしたいと思います。後でテキストをクリックすると、新しいアイテムがレンダリングされます。ここ

はサンプルコードです：

export default class FlatListBasics extends Component { 
renderNewItem =() => { 
// do something here 
} 
     render() { 
     return (
      <View style={styles.container}> 
      <FlatList 
       data={[ 
       {key: 'Devin'}, 
       {key: 'Jackson'}, 
       {key: 'James'}, 
       {key: 'Joel'}, 
       {key: 'John'}, 
       {key: 'Jillian'}, 
       {key: 'Jimmy'}, 
       {key: 'Julie'}, 
       ]} 
       renderItem={({item}) => <Text onPress={this.renderNewItem}>{item.key}</Text>} 
      /> 
      </View> 
     ); 
     } 

私はこれを達成することができ、どのように？

let state = { 
    data = [{key: "Devin"}, {key: "Jackson"}, {key: "James"}] 
} 

をそして、あなたのFlatListをレンダリング： }

Answer 1

Array.prototype.slice()を使用して、レンダリングされるデータの量を制御できます。あなたの状態にカウントを設定し、ボタンを押すたびに1を加えます。この方法では、データの読み込み方法に依存しません。ローカルデータソースを使用することも、APIを使用してリモートデータソースを使用することもできます。もう1つの重要なポイントは、keyExtractorを追加して、再レンダリングのパフォーマンスを向上させることです。

例

const data = [ 
    {key: 'Devin'}, 
    {key: 'Jackson'}, 
    {key: 'James'}, 
    {key: 'Joel'}, 
    {key: 'John'}, 
    {key: 'Jillian'}, 
    {key: 'Jimmy'}, 
    {key: 'Julie'}, 
]; 
class FlatListBasics extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     itemsCount: 3 
    }; 
    } 
    renderNewItem =() => { 
    if (this.state.itemsCount < data.length) { 
     this.setState((prevState) => ({ itemsCount: (prevState.itemsCount + 1) })); 
    } 
    } 
    render() { 
    return (
     <View style={styles.container}> 
     <FlatList 
      data={data.slice(0, this.state.itemsCount)} 
      keyExtractor={(item, index) => item.key;} 
      renderItem={({ item }) => <Text onPress={this.renderNewItem}>{item.key}</Text>} 
     /> 
     </View> 
    ); 
    } 
} 

Answer 2

だからまず、あなたのコンストラクタであなたの3つの項目のデータを準備します。

その後、renderItemに、あなたはあなたのdata

renderItem =() => { 
    <TouchableOpacity onPress=() => { this.setState({data: this.state.data.pushBack(/*your new item here*/)}) } 
    </TouchableOpacity> 
} 

this.setStateに項目を追加しますonPressは、したがって、それは、新たな追加項目が表示されます、再度レンダリングするためにすべてを強制する必要があります。