代码之家 › 专栏 › 技术社区 › ggDeGreat

Firebase和React Native Flatlist之间的JSON格式

react-native-firebase react-native-flatlist react-native

ggDeGreat · 技术社区 · 6 年前

这是存储在Firebase实时数据库中的数据

"Users" : {
  "Joe" : {
    "name" : "xxx",
    "email" : "xxx"
 },
 "Matt" : {
    "name" : "xxx",
    "email" : "xxx"
 }
}

这就是React Native Flatlist中需要的数据

 Users : [
  {
    id : "Joe"
    name : "xxx",
    email : "xxx",
  },
  {
    id : "Matt"
    name : "xxx",
    email : "xxx",
  }
]

在某处 componentDidMount() ..

firebase.database("Users").ref().once('value').then(function(snapshot) {
    var arr = _.values(snapshot.val());
    this.setState({ users: JSON.stringify(arr) });
})

在渲染平面列表中:

   <FlatList
           extraData={this.props}
           data={this.props.users}
           keyExtractor={(item, index) => index.toString()}
           renderItem={({ item }) => (
    ...

我怎么用 firebase.database().ref() 然后在平面列表中返回所需的数据?

1 回复 | 直到 6 年前

iRiziya 6 年前

你可以试试这样的方法:

我的第一个 constructor

constructor(props) {
    super(props);

    this.state = {
        arrData:[]
    };
}

然后从firebase获取数据

var ref = firebase.database().ref("Users"); //Here assuming 'Users' as main table of contents   

ref.once('value').then(snapshot => {
    // console.log(snapshot.val());

     // get children as an array
     var items = [];
     snapshot.forEach((child) => {
       items.push({
          id: child.val().id,
          name: child.val().name,
          email: child.val().email,
          phone: child.val().phone,
          status: child.val().status,
          user_type: child.val().user_type

       });
    });

    this.setState({ arrData: items});
});

现在你可以填充 arrData 在你的 FlatList 或 ListView .

希望对你有帮助!

推荐文章

theDC · 平面列表单选单元格

6 年前

Md Nahid Hasan · 如何在react原生平面列表中精确定位项目并隐藏某些内容?

6 年前

j_d · 如何使用React Native FlatList设置重新排序动画?

6 年前

johanjohansson · 如何在平面列表中交替颜色(React Native)

6 年前

arnoldbird · 我的平面列表似乎不需要密钥抽取器——为什么?

6 年前

KaplanAlex · React Native FlatList-使用动态大小呈现列表项

6 年前

Sandro_V · 对FlatList的React本机引用不起作用

6 年前

Saeid · 在react native中不调用平面列表中的函数

6 年前

Corrado · ReactNative平面列表-RenderItem不工作

6 年前

Adnan Ali · ReactNative android应用程序中的慢速动画

6 年前