0

Boa tarde, estou usando react native, e estou criando uma view aonde fica um elemento do lado do outro, com três fileiras uma abaixo da outra, e queria colocar o scrollview horizontal para quando as views atingisse o height das três fileiras fosse sendo adiconado na primeira fileira com a opção do scrollview horizontal, para poder percorrer as restantes das views, mas sempre que coloco o scrollview ele coloca tudo em uma unica fileira e eu queria três fileiras com o scrolview horizontal ativo vou mandar o exemplo:

inserir a descrição da imagem aqui

Meu Código está assim:

return (
    <View style={{
        flex:1,
        flexDirection:'row',
        flexWrap:'wrap',
       }}>
    
    {
        postInfo.map((data, index) => {
           const [like, setLike] = useState(data.isLiked)
            return(
              
               <View key={index}>
                 <View style={{width:80,
                       height:70,
                       marginHorizontal: 20,
                       marginTop:17
                       }}>
                     <Image
                        style={{
                            width:50,
                            height:50, 
                            resizeMode:'cover',
                            borderRadius:100,
                            alignSelf:'center'
                        }}  
                    source={data.imageLogo}
                    />   
                   <View style={{alignItems:'center'}}> 
                    <Text style={{fontSize:10,color:'gray'}}>{data.nameAgencia}</Text> 
                    <Text style={{fontSize:10,color:'#dddddd'}}>{data.local}</Text>        
                   </View>            
                </View>
               </View> 
            ) 
        })
    }
  </View>
         
)

Quando eu adiciono ScrollView Horizontal ele diminuiu tudo para uma linha, quem puder me ajudar agradeço muito.

1 Resposta 1

0

Bom depois de horas consegui resolver o problema, troquei a view por FlatList e adicionei o scrollview antes do flatlist, e adicionei numColums no flatlist com 3 fileiras, sendo assim possivel meu view com 3 colunas e o scrollview horizontal, vou deixar o código caso alguém precise.

return (

        <ScrollView
        horizontal
        contentContainerStyle={{
          flexDirection: 'row',
          flexWrap: 'wrap',
        }}>
        <FlatList 
                  ref={ref}
                  data={postInfo}
                  keyExtractor={(item, index) => index.toString()}
                  nestedScrollEnabled
                  showsHorizontalScrollIndicator={false}
                  numColumns={postInfo.length / 3}

                  renderItem={({item}) => {
                      return (
                         <View style={{padding:15}}>
                           <Image
                              style={{
                                  width:50,
                                  height:50, 
                                  resizeMode:'cover',
                                  borderRadius:100,
                                  alignSelf:'center',
                              }}  
                          source={item.imageLogo}
                          />   
                         <View style={{alignItems:'center'}}> 
                          <Text style={{fontSize:10,color:'gray'}}>{item.nameAgencia}</Text> 
                          <Text style={{fontSize:10,color:'#dddddd'}}>{item.local}</Text>        
                         </View>            
                      </View>
                      )
                  }}
                 />
      </ScrollView>
             
    )
}

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 .