从 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>
        )
    }
}

说实话，来自 expo 的官方文档并没有太大帮助 ^^ 而且我无法发布这个东西，因为我这里有很多代码？ -.-

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>
        )
    }
}