当前位置: 首页 > 知识库问答 >
问题:

为什么Firebase数据不显示在屏幕上使用反应本机的平板列表

章增
2023-03-14

但当我使用console.log显示数据时,它会正确地从'React'导入React,{useState,useffect,Component};从“react native”导入{样式表、视图、文本、TextInput、TouchableOpacity、按钮、平面列表};从“react native paper”导入{DataTable};从“../config/fire”导入{fire};从“react native elements”导入{ListItem,SearchBar};函数Donorlist(){const[govers,setgovers]=useState([]);const fetchgovers=async()=

}
useEffect(()=>{
    fetchDonors();
    
},[])
return (
    <View>
      <FlatList
      data={Donors}
      renderItem={({item})=>(
        console.log(item.name),
        <Text>
        {item.name}
      </Text>      )}/>

            
      {
             
            
           /*
             Donors.map((Donor,index)=>{
          return(
               console.log(Donor),
            <View className="blog-container">
             <Text>Donor List</Text>
             
            <DataTable>
<DataTable.Header>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }} >Name</DataTable.Title>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }}  >Email</DataTable.Title>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }}  >Phone</DataTable.Title>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }}  >Country</DataTable.Title>
      <DataTable.Title 
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }} >State</DataTable.Title>
      <DataTable.Title >City</DataTable.Title>
      <DataTable.Title 
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }} >Pin</DataTable.Title>     
    </DataTable.Header>
     <DataTable.Row>
    <DataTable.Cell ><Text>{Donor.name}</Text></DataTable.Cell>
      <DataTable.Cell >{Donor.email}</DataTable.Cell>
      <DataTable.Cell >{Donor.phone}</DataTable.Cell>
      <DataTable.Cell >{Donor.name}</DataTable.Cell>
      <DataTable.Cell >{Donor.email}</DataTable.Cell>
      <DataTable.Cell >{Donor.phone}</DataTable.Cell>
      <DataTable.Cell >{Donor.phone}</DataTable.Cell>

      
     </DataTable.Row> 
    
    <DataTable.Pagination
      page={1}
      numberOfPages={3}

      onPageChange={page => {
        console.log(page);
      }}
      label="1-2 of 6"
    />


</DataTable>
<View>
  <Text>List Data</Text>
<Text>{Donors.name}</Text>
  </View>

</View>
      
      )
        })*/
      }
      

    </View>
  );
}
export default Donorhtml" target="_blank">list;

共有3个答案

齐涛
2023-03-14
   const itembuilder=({item,index})=>

{

  console.log(item)//will provide data comes in each array object
 return(

   <View
        style={{
        margin:10,borderRadius:20,shadowOpacity:0.5,
        shadowOffset:{height:-15,width:15},
        shadowColor:'#FFF8DC'
        ,justifyContent:'center',shadowRadius:25,elevation:15,
        height:200,
        marginBottom:20,
        backgroundColor:'white'}}>
        
       <Text>{item.name}</Text>
        <Text>{item.email}</Text>//data inside each array object
         <Text>{item.phone}</Text>    
       </View>
        
    )
}
 <FlatList
    
    
    style={{height:500}}
    data={product}
    keyExtractor={item=>item.key}
    renderItem={itembuilder}
    >

    </FlatList>
钦海荣
2023-03-14

在itembuilder中添加console.log(项),以便您可以查看数据是否即将到来

华乐逸
2023-03-14

一些原因

1)你的文本组件在渲染项没有任何限制的视图尝试这个

这是我的密码可能对你有帮助

const itembuilder=({item,index})=>

{

 return(

   <View
        style={{
        margin:10,borderRadius:20,shadowOpacity:0.5,
        shadowOffset:{height:-15,width:15},
        shadowColor:'#FFF8DC'
        ,justifyContent:'center',shadowRadius:25,elevation:15,
        height:200,
        marginBottom:20,
        backgroundColor:'white'}}>
        
       <Text>{item.name}</Text>

       </View>
        
    )
}
 <FlatList
    
    
    style={{height:500}}
    data={product}
    keyExtractor={item=>item.key}
    renderItem={itembuilder}
    >

    </FlatList>

 类似资料:
  • 谁能引导我过去吗?也许我的效用不好?

  • 我试图在屏幕上垂直和水平居中显示文本。这是我的密码 如果我将flex:1添加到文本中,标题也会居中,这是不期望的。我不知道这是否相关,但我也不能修改标题视图的高度。我该如何解决这个问题?这些问题可以在这种小吃上重现。

  • 试图制作一个简单的应用程序,从服务器获取JSON数据,并在自定义列表中显示它们,非常简单的事情。 但当我运行应用程序时,它显示的是白色空白屏幕,但没有数据。它也没有显示任何错误,我假设如果有任何错误,它不会在我的手机中运行。但不显示获取的数据。 下面是类 我发现的其他问题与我的问题不匹配,否则不会添加这个问题。

  • 我基本上尝试了这个问题的每个答案,但似乎没有任何效果:React原生文本离开我的屏幕,拒绝换行。怎么办? 我面临着同样的问题,我的文本离开屏幕,似乎以大约130%左右的宽度运行。 这是我呈现列表的屏幕: 这是聊天预览组件,其中消息文本会离开屏幕:

  • 在过去一周左右的时间里,我一直在开发一款太空入侵者类型的游戏,它进展得非常顺利,但由于某种原因,当我在我的Windows电脑上运行游戏时(我更喜欢在它上面编写代码),大多数精灵都不会出现,或者只有当它们在屏幕上朝某个方向移动时才会出现。当我在Mac上运行完全相同的代码时,一切都会完美地闪烁和更新。这是pygame无法与Windows相处的已知问题吗?事实上,我的Mac电脑上的一切都正常工作,这让我