Fixed duplicate list child key warning

This commit is contained in:
Arnaud Vergnet 2020-07-21 22:35:38 +02:00
parent ae3d9310d6
commit ccf196abaa
4 changed files with 56 additions and 64 deletions

View file

@ -26,7 +26,6 @@ class CellComponent extends React.PureComponent<Props> {
borderWidth: 1, borderWidth: 1,
aspectRatio: 1, aspectRatio: 1,
}} }}
key={item.key}
/> />
); );
} }

View file

@ -31,7 +31,7 @@ class GridComponent extends React.Component<Props> {
} }
getCellRender = (item: Cell) => { getCellRender = (item: Cell) => {
return <CellComponent cell={item}/>; return <CellComponent cell={item} key={item.key}/>;
}; };
getGrid() { getGrid() {

View file

@ -109,6 +109,7 @@ export default class GameLogic {
onClock(callback: Function) { onClock(callback: Function) {
this.#gameTime++; this.#gameTime++;
console.log(this.#gameTime);
callback(this.#gameTime); callback(this.#gameTime);
} }

View file

@ -110,7 +110,7 @@ class GameStartScreen extends React.Component<Props, State> {
animation={"fadeInDownBig"} animation={"fadeInDownBig"}
delay={animDelay} delay={animDelay}
duration={animDuration} duration={animDuration}
key={index.toString()} key={"piece" + index.toString()}
style={{ style={{
width: size + "%", width: size + "%",
position: "absolute", position: "absolute",
@ -118,21 +118,14 @@ class GameStartScreen extends React.Component<Props, State> {
left: left + "%", left: left + "%",
}} }}
> >
<View style={{ <GridComponent
transform: [{rotateZ: rot + "deg"}], width={4}
}}> height={4}
<GridComponent grid={item}
width={4} style={{
height={4} transform: [{rotateZ: rot + "deg"}],
grid={item} }}
style={{ />
marginRight: 5,
marginLeft: 5,
marginBottom: 5,
}}
/>
</View>
</Animatable.View> </Animatable.View>
); );
})} })}
@ -379,34 +372,33 @@ class GameStartScreen extends React.Component<Props, State> {
getMainContent() { getMainContent() {
return ( return (
<View style={{flex: 1}}>
<View style={{flex: 1}}> {
{ this.gameStats != null
this.gameStats != null ? this.getPostGameContent(this.gameStats)
? this.getPostGameContent(this.gameStats) : this.getWelcomeText()
: this.getWelcomeText() }
} <Button
<Button icon={"play"}
icon={"play"} mode={"contained"}
mode={"contained"} onPress={() => this.props.navigation.replace(
onPress={() => this.props.navigation.replace( "game-main",
"game-main", {
{ highScore: this.scores.length > 0
highScore: this.scores.length > 0 ? this.scores[0]
? this.scores[0] : null
: null }
} )}
)} style={{
style={{ marginLeft: "auto",
marginLeft: "auto", marginRight: "auto",
marginRight: "auto", marginTop: 10,
marginTop: 10, }}
}} >
> {i18n.t("screens.game.play")}
{i18n.t("screens.game.play")} </Button>
</Button> {this.getTopScoresRender()}
{this.getTopScoresRender()} </View>
</View>
) )
} }
@ -425,24 +417,24 @@ class GameStartScreen extends React.Component<Props, State> {
start={{x: 0, y: 0}} start={{x: 0, y: 0}}
end={{x: 0, y: 1}} end={{x: 0, y: 1}}
> >
<ScrollView> <ScrollView>
{this.getMainContent()} {this.getMainContent()}
<MascotPopup <MascotPopup
visible={this.state.mascotDialogVisible} visible={this.state.mascotDialogVisible}
title={i18n.t("screens.game.mascotDialog.title")} title={i18n.t("screens.game.mascotDialog.title")}
message={i18n.t("screens.game.mascotDialog.message")} message={i18n.t("screens.game.mascotDialog.message")}
icon={"gamepad-variant"} icon={"gamepad-variant"}
buttons={{ buttons={{
action: null, action: null,
cancel: { cancel: {
message: i18n.t("screens.game.mascotDialog.button"), message: i18n.t("screens.game.mascotDialog.button"),
icon: "check", icon: "check",
onPress: this.hideMascotDialog, onPress: this.hideMascotDialog,
} }
}} }}
emotion={MASCOT_STYLE.COOL} emotion={MASCOT_STYLE.COOL}
/> />
</ScrollView> </ScrollView>
</LinearGradient> </LinearGradient>
</View> </View>