android - 加载主页组件时崩溃本机反应

问题描述

我使用 react native cli 创建了一个应用程序，当尝试访问主页组件时，应用程序会崩溃。其他页面，如启动、登录、注册组件正在完美加载。但是登录后主页不会加载。

该应用程序在模式下完美运行debug，但是当我创建一个releaseAPK 时它崩溃了，我在模拟器和安卓手机中都试过了。

我尝试使用adb logcat *:E. 您可以检查下面附加的错误日志。

请检查下面的代码，

package.json

{
    "name": "DoctorsBox",
    "version": "0.0.1",
    "private": true,
    "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
    },
    "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-native-fontawesome": "^0.2.3",
    "@react-native-community/async-storage": "^1.9.0",
    "@react-native-community/masked-view": "^0.1.7",
    "@react-navigation/drawer": "^5.4.0",
    "@react-navigation/material-top-tabs": "^5.1.7",
    "@react-navigation/native": "^5.1.4",
    "@react-navigation/stack": "^5.2.9",
    "axios": "^0.19.2",
    "firebase": "^7.13.2",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "react": "16.11.0",
    "react-native": "0.62.1",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-gifted-chat": "^0.13.0",
    "react-native-reanimated": "^1.7.1",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "react-native-svg": "^12.0.3",
    "react-native-tab-view": "^2.13.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
    },
    "devDependencies": {
    "@babel/core": "7.9.0",
    "@babel/runtime": "7.9.2",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.58.0",
    "react-test-renderer": "16.11.0"
    },
    "jest": {
    "preset": "react-native"
    }
}

Home.js

import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
AsyncStorage
} from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

import ChatScreen from './ChatTab';

const Tab = createMaterialTopTabNavigator();

function HomeScreen() {
    return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
    </View>
    );
}

function CallsScreen() {
    return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Calls!</Text>
    </View>
    );
}

export default class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            refreshing: false,
            category: null
        };
    }

    async componentDidMount() {
        let loginCategory = await AsyncStorage.getItem('SESS_CATEGORY');

        await this.setState({category: loginCategory});
    }

    render() {
        return (
            <View style={styles.container}>
                <Tab.Navigator>
                    <Tab.Screen name="Home" component={HomeScreen} />
                    <Tab.Screen name="Chats" component={ChatScreen} />
                    <Tab.Screen name="Calls" component={CallsScreen} />
                </Tab.Navigator>
            </View>
        );
    }
}

ChatTab.js

import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
AsyncStorage,
FlatList,
TouchableOpacity
} from 'react-native';
import firebase from 'firebase';
import moment from 'moment';

let colors = ["#0d2c4f", "#76ac42", "#2a55a5", "#1975a9"];

export default class ChatTab extends Component {
    constructor(props) {
        super(props);

        this.state = {
            id: null,
            loading: true
        };
    }

    async componentDidMount() {
        let loginId = await AsyncStorage.getItem('SESS_ID');

        this.setState({id: loginId});

        this.fetchConversations();
    }

    fetchConversations = () => {
        let messagesTemp = [];
        var ref = firebase.database().ref("Conversation");
        ref.child(this.state.id).on("value", function(snapshot) {
            // console.log(snapshot.val());

            snapshot.forEach(function(childSnapshot) {
                var key = childSnapshot.key;
                var name = snapshot.child(key + '/name').val();
                var title = snapshot.child(key + '/title').val();
                var to_id = snapshot.child(key + '/to_id').val();
                var sender = snapshot.child(key + '/sender').val();
                var receiver = snapshot.child(key + '/receiver').val();
                var msg_text = snapshot.child(key + '/text').val();
                var timestamp = snapshot.child(key + '/timeStamp').val();
                messagesTemp.push({_key: key, _name: name, _title: title, _to_id: to_id, _sender: sender, _receiver: receiver, _msg: msg_text, _timestamp: timestamp});
            })
        });

        this.setState({ messages: messagesTemp });

        if (this.state.messages !== null)
            this.setState({ loading: false });
    }

    startChat = (uid, id, name, title) => {
        this.props.navigation.navigate('Chat', {'to_uid': uid, 'to_id': id, 'chat_name': name, 'chat_title': title});
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.messages}
                    showsVerticalScrollIndicator={false}
                    renderItem={({ item, index }) => (
                        <TouchableOpacity onPress={() => this.startChat(item._sender, item._to_id, item._name, item._title)}>
                            <View style={styles.singleList} key={item._key}>
                                <View style={[styles.viewCircle, [{backgroundColor: colors[index % colors.length]}]]}>
                                    <Text style={styles.textCircle}>{item._name.charAt(0)}</Text>
                                </View>
                                <View style={{flex: 1, marginLeft: 10}}>
                                    <Text style={styles.name}>{item._name}</Text>
                                    <Text style={styles.title}>{item._msg}</Text>
                                </View>
                                <Text>{moment(item._timestamp).format('ddd hh:MM a')}</Text>
                            </View>
                        </TouchableOpacity>
                    )}
                    keyExtractor={item => item._key}
                    ref={ref => this.flatList = ref}
                    onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
                />
            </View>
        );
    }
}

我真的被困在这里了。如果有人有这个想法，那将非常有帮助。

标签： androidreactjsreact-native

android - 加载主页组件时崩溃本机反应

问题描述

解决方案

推荐阅读