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

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

我想在这里给出一个更一般的答案,因为返回相同错误消息的问题可能有几个原因.我见过的三个:

1.评论可能是原因.但不是删除评论,而是让它们起作用:

在return()-part中,变量需要包含在{}中, {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.如果不在-Component中,组件中的空格(或实际上任何字符串)都可能导致此问题<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

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

1. 在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>
       );
     }
   }
   

   这将呈现您的组件但仍然有问题,因为您在屏幕上看不到任何内容.

2. 为了让您的灵活色调显示为蓝色,您必须将Flex添加到<View>App.js文件中的组件或(取决于您接下来的步骤,我猜)将其删除并将您渲染<FlexibleViews>为根组件,因为它基本上是一个<View>有一些孩子的组件.