Question

刚开始学习反应原生，

我创建了一个单独的文件flexdemo.js并创建了如下组件：

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexibleViews extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1, backgroundColor: "powderblue" }}> </View>
                <View style={{ flex: 2, backgroundColor: "skyblue" }}> </View>
                <View style={{ flex: 3, backgroundColor: "steelblue" }}> </View>
            </View>

        );
    }
}

和App.js文件如下：

import React, { Component } from 'react';
import {
  AppRegistry,
  Platform,
  StyleSheet,
  Text,
  View, Image
} from 'react-native';

// import Bananas from './src/banana';
// import LotsOfStyles from './src/styledemo'

import FlexibleViews from './src/flexdemo';

export default class App extends Component {
  render() {
    return (
      // <Bananas name = "Tapan"/>
      <View>
        <FlexibleViews />
      </View>

    );
  }
}

这给了我这个错误：

现在，如果我尝试通过将flexdemo.js代码添加到App.js来运行代码，那么一切正常。

改变了这样的App.js：

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

Answer 1

删除组件内的注释。

Answer 2

我想在这里给出一个更一般的答案，因为the issue返回相同的错误消息可能有几个原因。我见过的三个：

<强> 1。评论可能是原因。但不是删除评论 make 他们的工作：

在return() - 部分中，变量需要包含在{}中 {this.state.foo}所以包装评论工作正常......

    return(
        <Text> This works {/* it really does */}</Text>
    );

...只要它们不是return语句中的第一个或最后一个元素：

    return(
      {/* This fails */}
      <Text> because the comment is in the beginning or end </Text>
      {/* This also fails */}
    );

<强> 2。可能是条件渲染。如果myCheck未定义或一个空字符串，这可能会失败：

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {myCheck && <MyComponent />}
    );

但添加了双重否定！工作：

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {!!myCheck && <MyComponent />}
    );

第3。组件中的空格（或实际上任何字符串）可能会导致这个，如果不在<Text> - 组件：

例如
视图中的文字：

/* This fails */ return( <View>it really does</View> );

但是两个组件之间的空间很小：

/* <View>*Space*<Text> fails: */ return( <View> <Text>it really does</Text> </View> );

但如果在换行符中有效：

return( <View> {/* This works */} <Text>surprisingly it does</Text> </View> );

不幸的是，这些陷阱并不总是导致错误。有时他们工作。我想这取决于您在应用中使用的所有工具/ lybraries /组件及其版本中的哪一个。

Answer 3

我能够使用您提供的代码重现该问题。解决方案有两个方面：

在flexdemo.js文件中，您应该从<View>标记中删除空格。它们被视为文本，文本仅允许在<Text>组件中。我建议您将<View>代码自我关闭，直到他们有一些内容，以便将来远离此问题，如下所示：

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexibleViews extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1, backgroundColor: 'powderblue' }} />
        <View style={{ flex: 2, backgroundColor: 'skyblue' }} />
        <View style={{ flex: 3, backgroundColor: 'steelblue' }} />
      </View>
    );
  }
}

这会渲染您的组件，但仍然有问题，因为您在屏幕上看不到任何内容。

要显示您灵活的蓝色阴影，您必须将flex添加到App.js文件中的<View>组件或（取决于您接下来的步骤，我猜）删除它并将<FlexibleViews>渲染为根组件，因为它基本上是一个带有一些孩子的<View>组件。

Answer 4

我降级反应原生版本，然后我得到了一个不同的错误，基本上是我在视图中有一个简单的字符串，如下所示：

<View>
    MyComponent
</View>

我必须用这样的文本组件包装字符串：

<View>
    <Text>MyComponent</Text>
</View>

希望有所帮助

Answer 5

如果您的if else函数中有render()声明，请使用 !! ，如下所示：

{!! (this.state.your_state) &&
   <View>
        <Text>Your Text</Text>
   </View>
}

而不是：

{(this.state.your_state) &&
    <View>
         <Text>Your Text</Text>
    </View>
}

Answer 6

        <View style={{ flex: 1 }}>
            <Text style={{ flex: 1, backgroundColor: "powderblue" }}> </Text>
            <Text style={{ flex: 2, backgroundColor: "skyblue" }}> </Text>
            <Text style={{ flex: 3, backgroundColor: "steelblue" }}> </Text>
        </View>

使用应当保持组件层次结构，例如所有组件（如Text，ListView，TextInput等）都应该包装在作为View的父组件中。让我们看下面的例子：

<视图>
<文字>
正确
确保所有Component标签都应正确关闭。
确保应从react本机布局组件和功能中删除不必要的分号。

https://www.skptricks.com/2018/08/react-native-cannot-add-child-that.html

Answer 7

此错误通常来自以下错误之一

删除不必要的评论并从退回功能中删除评论。
检查适当的变量名称。
检查意外的分号或任何错误的语法

Answer 8

删除返回栏中的评论＆＃34; //＆＃34; 当我不小心添加了一个＆＃39 ;;＆＃39;在返回块中，iOS运行良好，但Android有此错误信息

Answer 9

在我的情况下，我的一个视图周围有小括号（），这会引起错误。

({renderProgress()})

去掉小括号对我有用。

{renderProgress()}

Answer 10

在

中渲染方法时删除分号

<View style={styles.container}> {this.renderInitialView()} //semi-color should not be here </View>

Answer 11

我刚刚遇到了相同的问题，并通过删除在android studio中编辑项目时所做的注释来解决了该问题，在该注释的shorotcut中仅添加了/ *和* /，但实际上是为了对本机添加注释的代码应该用大括号的开头和结尾括起来，例如以下内容将是无效的注释：

/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/

以下内容将是有效的：

{/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/}

您会发现将注释括在花括号中仅存在一个小差异。

Answer 12

如果在render（）return（）函数中有注释，也会发生此错误。呈现JSX时，请删除return函数中的所有注释

Answer 13

在我的情况下，我的渲染函数中存在一个条件，导致求值为0。

在新版本的react native中似乎0 &&'some jsx'中断了。

错误示例：

render(){
   return <View>
              {this.state.someArray.length && <View>...</View>}
      </View>
}

尽管这应该是有效的javascript，并且由于0为false可以在react中工作，但它在react native中崩溃，不知道为什么，但是经过一点重构就可以工作：

工作示例：

render(){
   return <View>
              {this.state.someArray && this.state.someArray.length> 0 && 
              <View>...</View>}
          </View>
}

Answer 14

就我而言，我在<TextInput>标签中写了<Text>。下面是错误的。会给孩子带来错误。

<text>
  <TextInput style={styles.textinput} 
        textcolor
          placeholder = 'user id'
          placeholderTextColor = 'gray'
   />
</Text>

解决方案。

 <Text> hello </Text>
 <TextInput style={styles.textinput} 
        textcolor
          placeholder = 'user id'
          placeholderTextColor = 'gray'
  />

您必须编写单独的标签。

因此，您在其他标签中编写的任何标签都会出现此错误。

React native：无法添加没有YogaNode或父节点的子节点

14 个答案: