无法将没有 YogaNode 的孩子添加到没有测量功能的父母！(尝试将"ReactRawTextShadowNode"添加到"LayoutShadow"

Question

根据本教程，这是我的组件，我将其用作react 基本组件作为侧边栏组件，并且运行良好，但是当我将列表项从<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>
);
}
}

我收到此错误：

不能在没有 测量功能！(尝试将"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

对于由于与 OP 相同的错误消息而登陆此页面的其他人， 有很多问题可能会导致相同的错误消息。
围绕此一般错误消息存在 GitHub 问题。

最常见的原因可能是：

• 要呈现的文本未换行在<Text>标记中
• JSX 中的语法错误(例如，;或格式错误的标记)

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

• 假定某个值是null，但它是undefined，或''(空字符串)。
  在''的情况下，它需要用<Text>包裹(参见 以上第1项)

• 不包装子标记(特别是滚动视图)
• 两个相邻标签之间的空格
• CSS 的问题

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

如果您无法找到错误的根源，我强烈建议您采取 gander：https://github.com/facebook/react-native/issues/13243

正如一个人所写：

总结一下：
这个问题是关于 React Native 认为格式错误的 JSX(通常发生在 Android 渲染上)，并且这个线程在记录这种格式错误的 JSX 可能出现的许多形式方面做得很好。

它仍然没有解决开发人员逐行梳理代码以查找随机分号或空格的需求。

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

Answer 2

你应该使用<Text>在<Button>中显示文本，如下所示

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

Answer 3

我的错误是由以下代码引起的：

{caption && (
<Text
style={[styles.tag, { marginBottom: 8 }]}
numberOfLines={4}
ellipsizeMode="tail"
>
{caption}
</Text>
)}

出于某种原因，我需要强制caption从字符串转换为布尔值，以便它在 Android 上运行。(它在iOS上工作正常)：

{!!caption && (
<Text
style={[styles.tag, { marginBottom: 8 }]}
numberOfLines={4}
ellipsizeMode="tail"
>
{caption}
</Text>
)}

希望它对某人有所帮助

Answer 4

我案例中的错误涉及react-native-paperSnackbar。

错：

<Snackbar
visible
style={{ backgroundColor: 'blue' }}
action={{ label: 'OK', onPress: props.onPress }}
onDismiss={onDismiss: props.onDismiss}
>
<View>
<Text>Some Text</Text>
</View>
</Snackbar>

右：

<Snackbar
visible
style={{ backgroundColor: 'blue' }}
action={{ label: 'OK', onPress: props.onPress }}
onDismiss={onDismiss: props.onDismiss}
>
Some Text
</Snackbar>

令我惊讶的是，解决方案与包装成<Text>相反。这里可能是Snackbar特定的事情。