无法将没有 YogaNode 的 child 添加到没有测量功能的 parent！（尝试将 'ReactRawTextShadowNode' 添加到 'LayoutShadow

Question

根据 this 教程，这是我的组件，我将其用于 react base 组件作为侧边栏组件，它工作得很好，但是当我将列表项从 <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>
        );
    }
}

我收到这个错误：

cant add a child that doesn't have a YogaNede to parent without the measure function !(Trying to Add a 'ReactRawTextshadow' to a '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 issue。

可能最常见的原因是：

要呈现的文本未包含在 <Text> 标签中
JSX 语法错误（例如，;，或格式错误的标签）
a space 在 JSX 注释和 JSX 标签之间，如果你使用 Prettier
（似乎 Prettier 自动 ; 插入，
（解决方案：将 JSX 注释移到它自己的行）
某些值被假定为 null，但它是 undefined，或 ''（空字符串）。
在 '' 的情况下，它需要被包裹在 <Text> 中（参见上面第一项）
不包装子标签 (ScrollView in particular)
space between two adjacent tags
CSS 有问题

If a CSS node has measure defined, the layout algorithm will not visit its children. Even more, it asserts that you don't add children to nodes with measure functions.

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

作为一个人wrote：

To summarize:
This issue is about what React Native perceives to be mal formatted JSX (usually occurring on Android render) and this thread has done a good job documenting the many forms this malformatted JSX can come in.

It Still doesn't solve the need for developers to comb through their code line by line looking for a random semicolons or spaces.

If there is a way to have the stack trace be more specific about the specific offending character or error, that would probably save devs hours of sad debugging..

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-paper 的 Snackbar。

错误：

<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 特定的东西。

无法将没有 YogaNode 的 child 添加到没有测量功能的 parent！（尝试将 'ReactRawTextShadowNode' 添加到 'LayoutShadow

Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'ReactRawTextShadowNode' to a 'LayoutShadow

javascript

react-native

native-base

无法将没有 YogaNode 的 child 添加到没有测量功能的 parent！ （尝试将 'ReactRawTextShadowNode' 添加到 'LayoutShadow

Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'ReactRawTextShadowNode' to a 'LayoutShadow

javascript

react-native

native-base

无法将没有 YogaNode 的 child 添加到没有测量功能的 parent！（尝试将 'ReactRawTextShadowNode' 添加到 'LayoutShadow