javascript - React Native，无法将没有 YogaNode 的子级添加到没有测量功能的父级

Question

在我的 React Native 应用程序中，我不断收到错误“无法将没有 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() {
    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创建一个 View 并将 subview 包含在其中。将样式应用于 TouchableHighlight将其应用到这个创建的 View .