ios - React-Native ios 应用程序在我的手机上崩溃

Question

我最近开始开发 React Native 应用...

现在我正在构建一个 iOS 应用程序...当我使用 iOS 模拟器测试该应用程序时，一切正常，当我将我的 iPhone 连接到我的笔记本电脑并直接在我的 iPhone 上构建和运行该应用程序时，我没有任何问题和我的应用程序工作......但是当我从笔记本电脑上分离我的 iPhone 时，应用程序崩溃并且我无法再次运行它......

我不知道是什么问题...

这是我的代码:

import React, {Component} from "react";
import {Image, Text, View} from "react-native";
import Proximity from "react-native-proximity";
import {Card, CardSection} from "./common";


let rekatCounter = 0;
let sajdeCounter = 0;

class Main extends Component {

constructor(props) {
    super(props);
    this.state = {
        proximity: false,
        sajdeCounter: 0
    };
    this._proximityListener = this._proximityListener.bind(this);
}

componentDidMount() {
    Proximity.addListener(this._proximityListener);
}

/**
 * State of proximity sensor
 * @param {object} data
 */
_proximityListener(data) {
    if (data.proximity) {
        sajdeCounter += 1;
        this.setState({
            proximity: data.proximity,
        });
    }
}

componentWillUpdate() {

    if (sajdeCounter % 2 === 1 && sajdeCounter !== 1) {
        sajdeCounter = 1;
        rekatCounter += 1;
    }

    if (sajdeCounter === 1 && rekatCounter == 0) {
        rekatCounter = 1;
    }

    if (rekatCounter === 5 && sajdeCounter % 2 === 1) {
        sajdeCounter = 0;
        rekatCounter = 0;
    }

}

componentWillUnmount() {
    Proximity.removeListener(this._proximityListener);
}

render() {
    const resizeMode = 'cover';
    return (
        <Card>
            <CardSection>
                <View style={styles.sajdeCounterWrapper}>
                    <View
                        style={{
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            width: '100%',
                            height: '100%',
                            justifyContent: 'center',
                            alignItems: 'center'
                        }}
                    >
                        <Image
                            style={{
                                flex: 1,
                                resizeMode,
                            }}
                            source={ require('../../assets/bg.jpg')}
                        />
                    </View>

                    <Text style={styles.sajdeCounter}> {sajdeCounter}</Text>
                </View>
                <View style={styles.sajdeLabelWrapper}>
                    <Text style={styles.sajdeLabel}>Some string</Text>
                </View>
            </CardSection>
            <CardSection>
                <View style={styles.rekatCounterWrapper}>
                    <View
                        style={{
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            width: '100%',
                            height: '100%',
                            justifyContent: 'center',
                            alignItems: 'center'
                        }}
                    >
                        <Image
                            style={{
                                flex: 1,
                                resizeMode,
                            }}
                            source={ require('../../assets/bg.jpg')}
                        />
                    </View>

                    <Text style={styles.rekatCounter}>{rekatCounter}</Text>
                </View>
                <View style={styles.rekatLabelWrapper}>
                    <Text style={styles.rekatLabel}>Some string</Text>
                </View>
            </CardSection>

        </Card>
    );
}

const styles = {
    sajdeCounterWrapper: {
        flex: 3,
        justifyContent: 'center',
        alignItems: 'center'
    },
    sajdeCounter: {
        fontSize: 45
    },
    sajdeLabelWrapper: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    sajdeLabel: {
        fontSize: 45
    },
    rekatCounterWrapper: {
        flex: 3,
        justifyContent: 'center',
        alignItems: 'center'
    },
    rekatCounter: {
        fontSize: 45
    },
    rekatLabelWrapper: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    rekatLabel: {
        fontSize: 45
    }
};

export default Main;

Answer 1

您的应用程序崩溃的原因是因为它需要连接到笔记本电脑。

要在手机上运行您的应用程序而不通过电缆将其连接到电脑，您需要将手机连接到与笔记本电脑连接的同一 wifi。