Question

在我的本机应用程序中，我不断收到错误“无法将没有YogaNode的孩子添加到没有测量功能的父母”。

在Internet上，我仅找到诸如在实际的Text组件中包装文本或删除分号之类的提示，但是我在代码中找不到任何这些错误。

主文件/ Backgroundtracker.js

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";

import StartStopButton from "./src/components/StartStopButton/StartStopButton";

class BackgroudTracker extends Component {
    constructor(props) {
        super(props);
        this.state = {
            screenState: "Home"
        };
        this.changeStateScreenState = this.changeStateScreenState.bind(this);
    }

    changeStateScreenState() {
        futureState = this.state.screenState === "Home" ? "Tracking" : "Home";
        this.setState({
            screenState: futureState
        });
    }

    render() {
        return (
            <View>
                <StartStopButton changeStateScreenState={this.changeStateScreenState}/>
            </View>
        )
    }
}

export default BackgroudTracker;

StartStopButton.js

import React, { Component } from "react";
import {
    View,
    Text,
    TouchableHighlight,
    StyleSheet,
    LayoutAnimation,
    NativeModules
} from "react-native";
import { startTrack } from "../../utilities/startTrack";
import { stopTrack } from "../../utilities/stopTrack";

const { UIManager } = NativeModules;

UIManager.setLayoutAnimationEnabledExperimental &&
    UIManager.setLayoutAnimationEnabledExperimental(true);

class StartStopButton extends Component {
    constructor() {
        super();
        this.state = {
            currentButtonText: "rec",
            buttonStatus: "recordingButton",

            currentButtonColor: "#E0ECF1",
            currentButtonWidth: 310,
            currentButtonHeight: 310,
            currentButtonBorderRadius: 310 / 2,
            currentButtonBorderColor: "#79CDBE",
            currentButtonBorderWidth: 80
        };
    }

    startButtonProps = {
        startButtonWidth: 310,
        startButtonHeight: 310,
        startButtonBorderRadius: 310 / 2,
        startButtonBorderColor: "#79CDBE",
        startButtonBorderWidth: 80
    };

    stopButtonProps = {
        stopButtonWidth: 155,
        stopButtonHeight: 155,
        stopButtonBorderRadius: 30,
        stopButtonBorderColor: "#79CDBE",
        stopButtonBorderWidth: 33
    };

    startTrackingFunction() {
        startTrack();

        LayoutAnimation.spring();
        this.setState({
            buttonStatus: "stopButton",
            currentButtonText: "stop",

            currentButtonBorderRadius: this.stopButtonProps
                .stopButtonBorderRadius,
            currentButtonHeight: this.stopButtonProps.stopButtonHeight,
            currentButtonWidth: this.stopButtonProps.stopButtonWidth,
            currentButtonBorderWidth: this.stopButtonProps.stopButtonBorderWidth
        });
        this.props.changeStateScreenState;
    }

    stopTrackingFunction() {
        stopTrack();

        LayoutAnimation.spring();
        this.setState({
            buttonStatus: "recordingButton",
            currentButtonText: "rec",

            currentButtonBorderRadius: this.startButtonProps
                .startButtonBorderRadius,
            currentButtonHeight: this.startButtonProps.startButtonHeight,
            currentButtonWidth: this.startButtonProps.startButtonWidth,
            currentButtonBorderWidth: this.startButtonProps
                .startButtonBorderWidth
        });
        this.props.changeStateScreenState;
    }

    render() {
        return (
            <View>
                <TouchableHighlight
                    style={{
                        backgroundColor: this.state.currentButtonColor,
                        borderRadius: this.state.currentButtonBorderRadius,
                        height: this.state.currentButtonHeight,
                        width: this.state.currentButtonWidth,
                        borderWidth: this.state.currentButtonBorderWidth,
                        borderColor: this.state.currentButtonBorderColor,
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                    onPress={() => {
                        if (this.state.buttonStatus == "recordingButton") {
                            this.startTrackingFunction();
                        } else {
                            this.stopTrackingFunction();
                        }
                    }}
                >
                    <Text style={styles.startRecText}>
                        {this.state.currentButtonText}
                    </Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    startRecText: {
        alignSelf: "center",
        textAlign: "center",
        color: "#79CDBE",
        fontSize: 43,
        justifyContent: "center"
    }
});

export default StartStopButton;

如果您能在这里帮助我，我会很高兴！

Answer 1

编辑：

可以完成对渲染功能的评论，但是像这样：

render() {
    return (
        <View>
            { /*<KilometerDisplay screenState={this.state.screenState} />
            {renderIf(this.state.screenState == "Tracking")(
                <GifComponent />
            )}*/ }
            <StartStopButton changeStateScreenState={this.changeStateScreenState}/>
        </View>
    )
}

旧：

寻找未包装在<Text>中的流浪字符。我这样做是偶然的。我不小心在我的jsx中放了一个冒号，它把它当作文本对待，在RN中，所有文本都需要用<Text>包裹起来，这样就抛出了。您的某处可能有流浪文字。

在旁边：

您正在使用TouchableHighlight，因此在StartStopButton中无需将其包装在View中。 TouchableHighlight创建一个视图并将子视图包装在其中。将样式应用于TouchableHighlight会将样式应用于创建的View。

Answer 2

在我的渲染函数中，我有这样的注释：

render() {
    return (
        <View>
            /*<KilometerDisplay screenState={this.state.screenState} />
            {renderIf(this.state.screenState == "Tracking")(
                <GifComponent />
            )}*/
            <StartStopButton changeStateScreenState={this.changeStateScreenState}/>
        </View>
    )
}

这导致应用程序崩溃。

React Native，如果没有测量功能，则无法将没有YogaNode的子代添加到父代

2 个答案: