1

Após 7 à 9 nomes, ao criar um Scroll para visualização, o FlatList começa a renderizar um nome apenas depois que outro for inserido, e isto só acontece nos testes em Android, no web está funcionando normalmente.

GIF demonstrando tal no Android:

GIF PROBLEMA FLATLIST NO ANDROID

GIF demonstrando tal no Web:

GIF PROBLEMA FLATLIST NO WEB

Já tentei trocar a forma de como os nomes são atualizados mas continuou acontecendo a mesma coisa.

Código Relevante:

const handleAdd = () => {
        if (nome != '') {
            data.push({nome: nome, nivelId: nivel, goleiro: isGoleiro, id: contador});
            updateData([...data]);
            updateNome('');
            updateContador(contador+1);
            updateNivel(0);
            setGoleiro(false);
            console.log(data)
        } else {
            alert("Por favor insira um nome");
        }
    }

    const handleRemove = (id) => {
        const novosNomes = data.filter(item => item.id !== id);
        updateData([...novosNomes])
    }
    

    const renderItem = ({item}) => {
        return (
          <NomeItemContainer>
              <Nome>
                  {item.nome}
              </Nome>
              <Infos>
                  <Nivel>
                      {item.nivelId}
                  </Nivel>
                  {
                    item.goleiro === true
                    ? <MaterialIcons name="pan-tool" size={28} color="white" style={{paddingRight: 5}}/>
                    : <Nome></Nome>
                  }
                  <MaterialIcons name="remove-circle" size={28} color="white" onPress={() => handleRemove(item.id)}/>
              </Infos>
          </NomeItemContainer>
        );
    }
    
    return (
        <Container>
            <Cabecalho>
                <TitlePage>{nNomeEsporte}</TitlePage>
                <InputNomes 
                    onChangeText={(text) => updateNome(text)}
                    value={nome}
                    placeholder="Digitar Nome"
                    placeholderTextColor="black"
                />
                <InfoAdd>
                    <TextoInfos>Nível técnico</TextoInfos>
                    <SliderContainer>
                        <NivelSlider 
                            thumbTintColor="white"
                            minimumValue={0}
                            maximumValue={5}
                            step={1}
                            value={nivel}
                            onValueChange={(nivel) => updateNivel(nivel)}
                        />
                        <NivelNumber>
                            {nivel}
                        </NivelNumber>
                    </SliderContainer>
                    {nNomeEsporte === 'Vôlei' 
                        ? <TextoInfos></TextoInfos> 
                        : <GoleiroInfo>
                            <TextoInfos>Goleiro</TextoInfos>
                            <Switch 
                                value={isGoleiro}
                                onValueChange={toggleSwitch}
                            />
                        </GoleiroInfo>
                    }
                </InfoAdd>
                <Botao onPress={handleAdd}>
                    <BotaoTexto>Adicionar</BotaoTexto>
                </Botao>
            </Cabecalho>
            
            <ListaNomes 
                data={data}
                keyExtractor={(item, index) => String(index)}
                renderItem={renderItem}
                extraData={data}
            />        
        </Container>
    );
}
2
  • Isso só acontece quando a quantidade de itens não cabe na lista sem scrollar? Experimenta usar updateData(oldData => [...oldData, {nome, nivelId: nivel, goleiro: isGoleiro, id: contador}]); ao invés de updateData(data). 24/12/2020 às 13:47
  • 1
    Desta forma continuou a mesma coisa 24/12/2020 às 14:31

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .