Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Aula 2 - Warning

Boa noite!

Meu código esta igual ao do curso porém esta estourando esse warning. Sabem dizem o porque?

https://imgur.com/a/J42kR

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  FlatList
} from 'react-native';

const width = Dimensions.get('screen').width;

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {
  render() {

    const fotos = [
      {id: 1, usuario: 'Usr1'},
      {id: 2, usuario: 'Usr2'},
      {id: 3, usuario: 'Usr3'}
    ];

    return (

      <FlatList
        keyExtractor={item => item.id}
        data={fotos}
        renderItem={ ({item}) =>
          <View>
            <Text>{item.usuario}</Text>
            <Image source={require('./resources/img/img1.png')} style={{width:width, height: width}} />
          </View>
        }
      />

    )
  }
}

// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//     justifyContent: 'center',
//     alignItems: 'center',
//     backgroundColor: '#F5FCFF',
//   },
//   welcome: {
//     fontSize: 20,
//     textAlign: 'center',
//     margin: 10,
//   },
//   instructions: {
//     textAlign: 'center',
//     color: '#333333',
//     marginBottom: 5,
//   },
// });
1 resposta
solução!

Fala André, tudo bem?

Dei uma pesquisada por aqui e consegui identificar a fonte do problema.

Nas últimas versões do React Native o componente de lista utilizado espera receber como chave identificadora de cada elemento renderizado (key) uma String, soltando um warning caso o tipo de dado repassado seja diferente. Sendo assim poderíamos facilmente contornar esse detalhe fazendo o seguinte ajuste na propriedade keyExtractor...

keyExtractor={item => String(item.id)}

Testei por aqui e com esse ajuste consegui resolver.

Já coloquei inclusive um adendo no exercício onde usamos a FlatList. =)

Espero ter ajudado.

Abraço e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software