これは、魔女がアイテムをフェッチし、20枚のカードごとに広告を挿入するコンポーネントコードです。ページネーションを使用し、ユーザーがリストの一番下に到達すると、カードが既存のデータに追加されます。
// every 20 cards, inject an advertisment
var modulusCount = 0;
if ((this.state.labels.length - modCount) % 20 === 0) {
this.state.labels.push({type: 'ad'});
modulusCount++;
}
_renderItem = ({item}) => {
switch (item.type) {
case 'label':
return <Card key={item._id} style={styles.card}>
<CardTitle title={item.description}/>
<TouchableOpacity style={styles.image} onPress={() => this._showImage(item.imagepath, item.upvotes, item._id)} activeOpacity={0.7}>
<CardImage seperator={false} id={item._id} inColumn={false} source={{uri: item.imagepath}}/>
</TouchableOpacity>
</Card>;
case 'ad':
return (this.state.fbad && this.state.ads ?
<View key={item._id}>
<Card style={styles.card}>
<CardTitle title={'Sponsored'}/>
<BannerView
placementId={placementId}
type="large"
style={{width: 100}}
onPress={() => console.log('click')}
onError={this.onBannerAdError}
/>
</Card>
</View>
: null );
default:
return null;
}
};
<View style={styles.view}>
<FlatList
data={this.state.labels}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
onScroll={this._onScroll}
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.1}
onMomentumScrollBegin={() => {
this.onEndReachedCalledDuringMomentum = false;
}}
removeClippedSubviews={true}
ListFooterComponent={this.renderFooter}
/>
</View>
</View>
すべて正常に動作し、広告は 20 アイテムごとに表示されますが、RN はキーについて不平を言っていますWarning: Each child in an array or iterator should have a unique "key" prop.
「広告」タイプのキーで何かが起こっていることは間違いありません。何が間違っていますか? 「広告」タイプのキーを一意にするにはどうすればよいですか? shortid.generate()
npm モジュールを追加していくつかのアプローチを試みましたが、配列を押し込むときにキーを挿入し、コンポーネントthis.state.labels.push({key: shortid.generate(), type: 'ad'})
に設定しましたが、まったくうまくいきませんでした。key={item.key}
Card