Question

我从firebase中获取数据，并在console.warn中显示即时消息。但是我想显示滚动视图。

这是一个带有本机响应功能的简单记事本。

这是我的数据获取代码。它正在运行，但只能在控制台上使用。

componentWillMount(){

 var firebaseConfig = {
  apiKey: "AIzaSyCihLKk1w9H6dtpSf7KvRhKVAc6VvOARgs",
  authDomain: "fir-expdb.firebaseapp.com",
  databaseURL: "https://fir-expdb.firebaseio.com",
  projectId: "fir-expdb",
  storageBucket: "",
  messagingSenderId: "56787464528",
  appId: "1:56787464528:web:a78d9d76676a9157"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
database = firebase.database();
var ref = database.ref('users');
ref.on('value',gotData,errData);

function  gotData(data) {


  var users = data.val();
  var keys = Object.keys(users);

  for (var i =0; i < keys.length; i++){

          var k = keys[i];
          var names = users[k].name;
          var score = users[k].score;
        console.warn(names,score);


  }
}

function errData(err){
  console.warn('Error!');
  console.warn(err);
}
}

我希望在滚动视图上显示。

Answer 1

使用数组可以在scrollView中显示数据。

<View>
            <ScrollView>
               {
                  this.state.data.map((item, index) => (
                     <View key = {item.id} style = {styles.item}>
                        <Text>{item.name}</Text>
                     </View>
                  ))
               }
            </ScrollView>
 </View>

Answer 2

导入FlatList

import {
  View,
  Text,
  FlatList,
} from 'react-native';

定义构造函数：

 constructor(props){
    super(props);
    this.state={
      date_list:[],
    }
  }

在componentDidMount中：

  componentDidMount(){
    var database = firebase.database();
    var ref = database.ref('users');
    ref.on('value',snapShot=>{
    if(snapShot.val()){
     let dataList=Object.values(snapShot.val());
     this.setState({
      data_list:dataList,
     })
  }
})
}

渲染中：

render(){
  return (
    <View style={{flex:1}}>
       <FlatList
      data={this.state.data_list}
      keyExtractor={(item,index)=>item.name}
      renderItem={({item})=>(
        <View style={{padding:7}}>
          <Text style={{fontSize:20}}>{item.name}</Text>
          <Text style={{fontSize:15}}>{item.score}</Text>
          <View style={{height:0.3,width:'100%',backgroundColor:'black'}}/>
        </View>
      )}
      />
    </View>
  );
};

完整代码：

import React, { Component } from 'react';
import * as firebase from 'firebase';
import {
  View,
  Text,
  FlatList,
} from 'react-native';

var firebaseConfig = {
  apiKey: "AIzaSyCihLKk1w9H6dtpSf7KvRhKVAc6VvOARgs",
  authDomain: "fir-expdb.firebaseapp.com",
  databaseURL: "https://fir-expdb.firebaseio.com",
  projectId: "fir-expdb",
  storageBucket: "",
  messagingSenderId: "56787464528",
  appId: "1:56787464528:web:a78d9d76676a9157"
};
firebase.initializeApp(firebaseConfig);

export default class App extends Component {
  constructor(props){
    super(props);
    this.state={
      date_list:[],
    }
  }
  componentDidMount(){
    var database = firebase.database();
    var ref = database.ref('users');
    ref.on('value',snapShot=>{
    if(snapShot.val()){
     let dataList=Object.values(snapShot.val());
     this.setState({
      data_list:dataList,
     })
  }
})
}

render(){
  return (
    <View style={{flex:1}}>
       <FlatList
      data={this.state.data_list}
      keyExtractor={(item,index)=>item.name}
      renderItem={({item})=>(
        <View style={{padding:7}}>
          <Text style={{fontSize:20}}>{item.name}</Text>
          <Text style={{fontSize:15}}>{item.score}</Text>
          <View style={{height:0.3,width:'100%',backgroundColor:'black'}}/>
        </View>
      )}
      />
    </View>
  );
};
}

我从firebase获取数据，但我无法在仅显示console.warn的视图中显示

2 个答案: