从Firebase实时数据库React Native(expo)获取数据

Question

我有那个代码，我需要在这里获取数据而不是静态数组。 注意：已连接到Firebase实时数据库和所有这些东西，我只需要获取数据并映射它们，我需要将它们呈现在列表中。

const rec = [
{
name: 'Brothers Restaurant',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
address: 'Address St. Random Number',
link: 'Home'
},
{
name: 'Example Restaurant',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
address: 'Address St. Random Number 23',
link: 'About'
},
{
name: 'Example Restaurant',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
address: 'Address St. Random Number 23',
link: 'About'
},
{
name: 'Example Restaurant',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
address: 'Address St. Random Number 23',
link: 'About'
},
]
const discover = [
{
name: 'Discover Restaurant',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
address: 'Address St. Random Number',
link: 'Home'
},
{
name: 'Example Discover Restaurant',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
address: 'Address St. Random Number 23',
link: 'About'
},
{
name: 'Discover Restaurant',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
address: 'Address St. Random Number',
link: 'Home'
},
{
name: 'Example Discover Restaurant',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
address: 'Address St. Random Number 23',
link: 'About'
},
{
name: 'Discover Restaurant',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
address: 'Address St. Random Number',
link: 'Home'
},
{
name: 'Example Discover Restaurant',
avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
address: 'Address St. Random Number 23',
link: 'About'
},
]
export default class RestaurantScreen extends Component {
static navigationOptions = {
title: 'Restaurants',
headerStyle: {
backgroundColor: '#c4463d',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}
render() {
return (
<View style={styles.container}>
<Text style={{ fontSize: 24, fontWeight: '700', color: '#c4463d' }}>Recommendations</Text>
<ScrollView
style={styles.categories}>
<View>
{
rec.map((l, i) => (
<ListItem
key={i}
leftAvatar={{ source: { uri: l.avatar_url } }}
title={l.name}
address={l.subtitle}
onPress={() => this.props.navigation.navigate(`${l.link}`)}
bottomDivider
/>
))
}
</View>
</ScrollView>
<View style={styles.recommendations}>
<Text style={{ fontSize: 24, fontWeight: '700', color: '#c4463d' }}>Discover</Text>
<ScrollView>
{
discover.map((l, i) => (
<ListItem
key={i}
leftAvatar={{ source: { uri: l.avatar_url } }}
title={l.name}
address={l.subtitle}
bottomDivider
/>
))
}
</ScrollView>
</View>
</View>
)
}
}

老实说，世博会的官方文档并没有多大帮助^^我无法发布这个东西，因为我这里有很多代码？ -.-

Answer 1

基本上，如果一切都设置好了，你只需要将监听器放在生命周期方法(componentDidMount(中，并将数据设置在状态中。 有关更多信息，您可以查看 Firebase JS SDK。

https://firebase.google.com/docs/web/setup

export default class RestaurantScreen extends Component {

state = {
rec: [],
discover: []
}

static navigationOptions = {
title: 'Restaurants',
headerStyle: {
backgroundColor: '#c4463d',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}

componentDidMount() {
firebase.database().ref('places').on('value', (snapshot) => {
const rec = snapshot.val();
this.setState({ rec, discover: rec })
});

}
render() {
const { rec, discover } = this.state;

return (
<View style={styles.container}>
<Text style={{ fontSize: 24, fontWeight: '700', color: '#c4463d' }}>Recommendations</Text>
<ScrollView
style={styles.categories}>
<View>
{
rec.map((l, i) => (
<ListItem
key={i}
leftAvatar={{ source: { uri: l.avatar_url } }}
title={l.name}
address={l.subtitle}
onPress={() => this.props.navigation.navigate(`${l.link}`)}
bottomDivider
/>
))
}
</View>
</ScrollView>
<View style={styles.recommendations}>
<Text style={{ fontSize: 24, fontWeight: '700', color: '#c4463d' }}>Discover</Text>
<ScrollView>
{
discover.map((l, i) => (
<ListItem
key={i}
leftAvatar={{ source: { uri: l.avatar_url } }}
title={l.name}
address={l.subtitle}
bottomDivider
/>
))
}
</ScrollView>
</View>
</View>
)
}
}