Question

我的数据没有显示，我正在实时使用Firebase，并在android studio中的React Native android模拟器上进行了测试：

<FlatList
   data={this.state.userList}
   keyExtractor={(item,index)=>item.article_title}
   renderItem={({item}) =>
       <View style={{alignItems:'center',justifyContent:'center'}}>
           <Image style={{height:40,width:40,borderRadius:20}}
               source={{uri:`${item.article_image}`}} />
           <Text style={{color:'black',fontWeight:'bold',fontSize:30}}>
              {item.article_title}
           </Text>
       </View>
   } />

Answer 1

removeClippedSubviews = {false}使用它。如果不起作用，请尝试进行平面列表优化 check this thread

Answer 2

问题很可能是从Firebase返回的数据不是数组。通过遍历对象或使用lodash辅助函数之一，尝试将其转换为数组。

类似这里的内容：transform object to array with lodash

使用lodash，您可以执行以下操作：

<FlatList
    data={_.values(this.state.userList)}
    keyExtractor={(item, index) => item.article_title}
    renderItem={({item}) =>

        <View style={{alignItems: 'center', justifyContent: 'center'}}>
            <Image style={{height: 40, width: 40, borderRadius: 20}}
                   source={{uri: `${item.article_image}`}}/>
            <Text style={{color: 'black', fontWeight: 'bold', fontSize: 30}}>{item.article_title}</Text>

        </View>

    }/>

Answer 3

我的数组转换

state={
userList:[]
}
ComponentWillMount()
{
  firebase.database().ref().child('datas').once('value',(snap) =>{
    let userList=[]
    snap.forEach((data) =>{
      const {article_title,article_content,article_image}= data.val()
      userList.push({article_title,article_content,article_image})
    })
    this.setState({userList})
  })
}

Answer 4

感谢您提供宝贵的答案，导致我出现问题的原因不是数组转换问题：firebase版本:)

反应本地Firebse平面列表数据未在文本和图像中显示

4 个答案: