React Native随机错误:30 - 90秒后无法找到变量图像

时间:2017-11-07 09:07:54

标签: javascript reactjs react-native react-native-ios

所以我正在使用

构建一个React Native应用程序
  • React Native - 最新
  • MobX和MobX-React - 最新
  • Firebase - 最新

我的应用运行正常。但是,我可以让应用程序闲置或使用它,并在30-90秒后我出现此错误的红色屏幕。它不是非常具体的错误文件!我该怎么调试呢?

enter image description here

Firebase.js

export function getFeed(db,id,callback){
    db.collection("posts").where("userId", "==", id)
    .get()
    .then(function (querySnapshot) {
        callback(true,querySnapshot)
    })
    .catch(function (error) {
        callback(false)
        console.log("Error getting documents: ", error);
    });
}

List.js

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    FlatList,
    ActivityIndicator,
    RefreshControl
} from 'react-native';
import Post from './Post';
import Spinner from 'react-native-spinkit';
import { Icon } from 'react-native-elements';
import { getFeed } from '../../network/Firebase';
import { observer, inject } from 'mobx-react';

@inject('mainStore')
@observer export default class List extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dataSource: [],
            initialLoad: true,
            refreshing: false
        }
        this.getData = this.getData.bind(this)
    }

    componentWillMount() {
        this.getData()
    }

    getData() {
        this.setState({
            refreshing: true
        })
        getFeed(this.props.screenProps.db, this.props.mainStore.userData.id, (status, res) => {
            let tempArray = []
            let counter = 0
            res.forEach((doc) => {
                let tempObj = doc.data()
                doc.data().user
                    .get()
                    .then((querySnapshot) => {
                        tempObj.userData = querySnapshot.data()
                        tempArray.push(tempObj)
                        counter = counter + 1
                        if (counter === res.docs.length - 1) {
                            this.setState({
                                dataSource: tempArray,
                                initialLoad: false,
                                refreshing: false
                            })
                        }
                    })
            });
        })
    }


    renderRow = ({ item }) => {
        return (
            <Post item={item} />
        )
    }

    render() {
        if (this.state.initialLoad) {
            return (
                <View style={styles.spinner}>
                    <Spinner isVisible={true} type="9CubeGrid" size={40} color="white" />
                </View>
            )
        } else {
            return (
                <FlatList
                    data={this.state.dataSource}
                    extraData={this.state}
                    keyExtractor={(_, i) => i}
                    renderItem={(item) => this.renderRow(item)}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this.getData}
                        />
                    }
                />
            );
        }
    }
}

const styles = StyleSheet.create({
    spinner: {
        marginTop: 30,
        alignItems: 'center'
    }
});

Post.js

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image
} from 'react-native';
import moment from 'moment';
import { Icon } from 'react-native-elements';

export default class Post extends React.PureComponent {
    render() {
        let today = moment()
        let date = this.props.item.date
        if(today.diff(date, 'days') < 5){
            date = moment(date).startOf('day').fromNow()
        }else{
            date = moment(date).format('DD MMM YYYY, h:mm a')
        }
        return (
            <View
                style={styles.container}
            >
                <View style={styles.top}>
                    <Image style={styles.profile} source={{uri: this.props.item.userData.image}} />
                    <Text style={styles.title}>{this.props.item.userData.firstName+' '+this.props.item.userData.lastName}</Text>
                </View>
                <View style={styles.descriptionContainer}>
                    <Text style={styles.description}>{this.props.item.description}</Text>
                </View>
                <View style={styles.imageContainer}>
                    <Image style={styles.image} source={{uri: this.props.item.image}} />
                </View>
                <TouchableOpacity style={styles.commentsContainer}>
                    <View style={styles.timeFlex}>
                        <Text style={styles.title}>{date}</Text>
                    </View>
                    <View style={styles.commentFlex}>
                        <Text style={styles.title}>Comments (12)</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    title: {
        color: 'white',
        backgroundColor: 'transparent'
    },
    timeFlex: {
        flex: 0.5,
        alignItems: 'flex-start'
    },
    commentFlex: {
        flex: 0.5,
        alignItems: 'flex-end'
    },
    profile: {
        width: 40,
        height: 40,
        borderRadius: 20,
        marginRight: 10
    },
    descriptionContainer: {
        marginBottom: 10,
        marginHorizontal: 15,
    },
    description: {
        color: 'rgba(255,255,255,0.5)'
    },
    commentsContainer: {
        marginBottom: 10,
        alignItems: 'flex-end',
        marginHorizontal: 15,
        flexDirection: 'row'
    },
    imageContainer: {
        marginBottom: 10,
        marginHorizontal: 15,
        height: 180
    },
    image: {
        height: '100%',
        width: '100%'
    },
    top: {
        justifyContent: 'flex-start',
        margin: 10,
        marginLeft: 15,
        flexDirection: 'row',
        alignItems: 'center'
    },
    container: {
        margin: 10,
        backgroundColor: '#243c5e',
        borderRadius: 10,
        shadowColor: 'black',
        shadowOffset: {
            width: 2,
            height: 1
        },
        shadowRadius: 4,
        shadowOpacity: 0.3
    }
});

0 个答案:

没有答案