React Native，无法将没有 YogaNode 的子节点添加到没有度量函数的父节点

Question

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

在互联网上，我只找到了诸如在实际文本组件中换行或删除分号之类的提示，但我在我的代码中没有发现任何这些错误。

主文件/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 函数中可以做注释，但是像这样：

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

这导致应用程序崩溃。