-2

Estou fazendo uma tela aqui e quero exibir uma lista de especialidades médicas, só que não quero ter que fazer isto manualmente, então implementei o FlatList só que apesar de estar recebendo as informações, nada é renderizado. Já alterei o tamanho da view, coloquei borda, mudei o conteúdo a ser renderizado e nada.

import React, { Component } from 'react';
import { StyleSheet, Text, View,Image, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native'
import { TextInput, RectButton, TouchableWithoutFeedback, ScrollView, TouchableNativeFeedback, FlatList } from 'react-native-gesture-handler';
import { Entypo } from '@expo/vector-icons'; 
import { Ionicons } from '@expo/vector-icons'; 

const specialties = [
    "Dentista",
    "Geriatra",
    "Otorrino",
    "Ginecologista",
    "Dermatologista",
    "Psicanalista",
    "Psiquiatra",
    "Oftalmologista",
    "Pediatra",
    "Clínico Geral",
    "Cardiologista",
    "Nutricionista",
    "Urologista",
]

const initialState = {
    specialty: "",
    name: "",
    city: "",
    specialties: [...specialties]
}


export default class DocList extends Component {

    state = {
        ...initialState
    }

    showSpecialty = (specialty) => {
        let s = <RectButton style = {styles.specialtyBox}>
                    <Text style = {styles.specialty}>
                        teste
                    </Text>
                </RectButton>;
        return s;
    }

    render() {
        return (
          <View style={styles.container}>
              <View style = {styles.top}>
                  <TouchableWithoutFeedback style = {{marginRight: 10,marginTop:10}}>
                      <Text style = {styles.buttonText}>HomeDoc</Text>
                  </TouchableWithoutFeedback>
              </View>
              <View style = {styles.content}>
                  <View style = {styles.body}>
                      <Text style = {styles.title}>Encontre seu Médico</Text>
                      <View style = {styles.inputBox}>
                          <Entypo name="key" size={24} color="#007575" style = {{marginLeft:5}}/>
                          <TextInput style = {styles.input} placeholder = "Digite o nome do seu médico"></TextInput>
                      </View>
                      <View style = {styles.specialityContainer}>
                      <FlatList
                            data = {this.state.specialties}
                            horizontal = {true}
                            keyExtractor = {(item,index) => `${index}`}
                            renderItem = {({item}) => {
                                <RectButton style = {styles.specialtyBox}>
                                    <Text style = {styles.specialty}>
                                        teste
                                    </Text>
                             </RectButton>;
                            }}/>
                      </View>
                  </View>
              </View>
          </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingVertical:25,
        backgroundColor: "#28ADA6",
    },
    top: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    content: {
        flex: 1,
        paddingTop:20
    },
    body: {
        width:'100%',
        height: 200,
        alignItems: 'center',
        borderRadius: 20,
        
    },
    title: {
        color: '#fff',
        fontFamily: 'Archivo_700Bold',
        fontSize: 20,
        marginBottom:10,
    },
    button: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 240,
        height: 50,
        backgroundColor: '#007575',
        borderRadius: 10,
        marginTop: 10,
    },
    buttonText: {
        color: '#fff',
        fontFamily: 'Archivo_700Bold',
    },
    input: {
        width: 200,
        height:50,
        backgroundColor: '#fff',
        borderRadius: 10,
        marginLeft: 10
    },
    inputBox: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        marginHorizontal: 15,
        marginVertical:10,
        alignItems: 'center',
        backgroundColor: 'white',
        borderWidth: 1,
        borderRadius: 10,
        borderColor: '#007575',
    },
    specialityContainer: {
        height: 200,
        width: '100%',
        borderWidth:5,
        borderColor:'red',
    },
    specialtyBox: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems:'center',
        marginHorizontal: 15,
        marginVertical:10,
        alignItems: 'center',
        backgroundColor: 'white',
        borderWidth: 1,
        borderRadius: 10,
        borderColor: '#007575',
    },
    specialty: {
        width:100,
        textAlign:'center'
    }
  });
  

Resolvido

O problema era a importação! Estava importando do 'react-native-gesture-handler', mudei o import para o 'react-native' e passou a funcionar!

1 Resposta 1

0

Perdão, estava usando de um projeto que já tinha e vi que tava puxando os meus dados e não o seu

  1. Crie uma pasta chamada de 'data.js' e salva os dados

    const specialties = {
    
     docs:[ 
         {
             id:1, 
             especialidade:"Dentista"
         },
         {
             id:2, 
             especialidade:"Geriatra"
         },
         {
             id:3,
             especialidade:"Otorrino"
         },
     ]
    }
    
    export {specialties}
    
  2. Importe para a sua pagina onde você quer pegar os dados

    import {specialties} from './data'

Agora em seguida, você irá adicionar antes do render()

`

 state = {
     ...initialState,
     docs:[]  <-- add
 }

`

componentDidMount(){
    this.loadProduct();
}

loadProduct = async() => {
    const res = specialties

    const {docs} = res

    this.setState({docs})
    // console.log(docs)
}

renderItens = ({item}) =>(
    <Text>{item.especialidade}</Text>
)
  1. agora é só adicionar isso no flatList

`

<FlatList
    data = {this.state.docs}
    horizontal = {true}
    keyExtractor = {(item,index) => `${index}`}
    renderItem = {this.renderItens}
 />

`

4
  • Oi, então testei isso ai que disse mas ainda continua não renderizando nada na tela. Commented 13/09/2020 às 19:10
  • Tente agora, só lembra de deletar const specialties = [...] para não entrar em conflito Commented 13/09/2020 às 21:58
  • Creio que no key extractor tem que converter o id pra String Commented 13/09/2020 às 23:13
  • O id que coloquei foi para simular um banco de dados, se ela usar uma api de verdade já deve está tudo configurado, tipo: _id:{type:Schema.Types.ObjectId}, especialidade:{type:String} Commented 14/09/2020 às 2:13

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .