没有测量功能,无法将没有YogaNode的孩子添加到父级!(尝试将'ReactRawTextShadowNode'添加到'LayoutShadow

Question

根据本教程,这是我用作反应基础组件作为侧栏组件的组件,它的工作非常好,但是当我将列表项更改<Text>为<Button>

    import { Text, Container, Header, Content, List, ListItem, TextBody, Button } from 'native-base';
import { StackNavigator, DrawerNavigator } from 'react-navigation'

export default class SideBar extends Component {

    render() {
        return (
            <Content style={{ backgroundColor: '#ffffff' }}>
                <Container>

                    <Content>
                        <List>
                            <ListItem>
                                <Text>First</Text>
                            </ListItem>
                            <ListItem>
                                <Text>Secount</Text>
                            </ListItem>
                            <ListItem>
                                <Text>Third</Text>
                            </ListItem>
                        </List>
                    </Content>
                </Container>
            </Content>
        );
    }
}

我收到此错误:

如果没有measure函数,则无法将没有YogaNede的子项添加到父级!(尝试将'ReactRawTextshadow'添加到'LayoutShadowNode')

根本无法理解这个错误,并没有在网上看到任何关于它的事情!

> Cannot add a child that doesn't have a YogaNode to a parent without a
> measure function! (Trying to add a 'ReactRawTextShadowNode' to a
> 'LayoutShadowNode') addChildAt
>     ReactShadowNodeImpl.java:199 addChildAt
>     ReactShadowNodeImpl.java:54 setChildren
>     UIImplementation.java:472 setChildren
>     UIManagerModule.java:436 invoke
>     Method.java invoke
>     Method.java:372 invoke
>     JavaMethodWrapper.java:374 invoke
>     JavaModuleWrapper.java:162 run
>     NativeRunnable.java handleCallback
>     Handler.java:739 dispatchMessage
>     Handler.java:95 dispatchMessage
>     MessageQueueThreadHandler.java:31 loop
>     Looper.java:135 run
>     MessageQueueThreadImpl.java:194 run
>     Thread.java:818

Answer 1

你应该使用<Text>在显示文本<Button>这样

<ListItem>
    <Button> <Text>First</Text> </Button>
</ListItem>

Answer 2

对于因与OP相同的错误消息而登陆此页面的其他人,有许多问题可能导致相同的错误消息.围绕此一般错误消息
存在GitHub问题.

可能最常见的原因是:

• 要呈现的文本不包含在<Text>标记中
• JSX中的语法错误(例如,a ;或格式错误的标记)

• JSX注释和JSX标记之间的空格,如果你使用Prettier
  (似乎Prettier自动;插入,
  (解决方案:将JSX注释移动到自己的行)

• 假定某个值是null,但它是undefined一个''(空字符串).
  如果是'',则需要将其包裹起来<Text>(参见上面的第1项)

• 不包装子标签(特别是ScrollView)
• 两个相邻标签之间的空间
• CSS的问题

  如果CSS节点已定义度量,则布局算法将不会访问其子节点.更重要的是,它断言您不会将子项添加到具有度量函数的节点.

如果您在查找错误来源时遇到问题,我强烈建议您选择以下内容:https: //github.com/facebook/react-native/issues/13243

正如一个人写道:

总结一下:
这个问题是关于React Native认为是格式错误的JSX(通常发生在Android渲染上)的问题,这个线程已经很好地记录了这个格式错误的JSX可以进入的许多表单.

它仍然无法解决开发人员逐行梳理代码随机分号或空格的需求.

如果有一种方法可以让堆栈跟踪更具体地说明特定的违规字符或错误,那么这可能会节省开发人员几小时的悲伤调试时间.