如何在React Native中的选择器中显示来自firebase的数据

Question

我正在开发一个react本地的应用程序，我想在firebase中存储的picker中显示名称和值。如何在选择器上显示Firebase的数据？

nb： - 我是菜鸟。因此，如果可以的话，请提供一个简单的例子。

Answer 1

您可以从Firebase实时数据库中使用React Native Artices找到有关如何使用Firebase数据库的基本指南。

从中获取数据后，您只需要使用setState来设置数据并使用React Antive中的选择器。

<Picker
  selectedValue={this.state.language}
  style={{height: 50, width: 100}}
  onValueChange={(itemValue, itemIndex) =>
  this.setState({language: itemValue})
}>
   <Picker.Item label="Java" value="java" />    // update this according to your firebase data collection
   <Picker.Item label="JavaScript" value="js" />
</Picker>

这是用于选择器的演示代码，您需要根据firebase数据渲染 Picker.Item。

您甚至可以使用名为" react-native-picker"的第三部分库，该库将在 android和 iOS的轮子选择器中显示数据。

update

您也需要动态代码，请参阅参考代码

{this.state.data.map(element =>
    <Picker.Item label={element} value={element} />
)}

this.state.data是您从firebase