javascript - Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a &a

admin管理员组

文章数量:1186688

According on this tutorial, this is my component which I use for a react base component as a side bar component, and its working very well, but the problem starts when I change list items from <Text> to <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>
        );
    }
}

I get this error:

cant add a child that doesn't have a YogaNede to parent without the measure function !(Trying to Add a 'ReactRawTextshadow' to a 'LayoutShadowNode' )

cant understand this error at all and didn't saw any thing about it on net!

> 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

According on this tutorial, this is my component which I use for a react base component as a side bar component, and its working very well, but the problem starts when I change list items from <Text> to <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>
        );
    }
}

I get this error:

cant add a child that doesn't have a YogaNede to parent without the measure function !(Trying to Add a 'ReactRawTextshadow' to a 'LayoutShadowNode' )

cant understand this error at all and didn't saw any thing about it on net!

> 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

• javascript
• react-native
• native-base

Share Improve this question Follow edited Apr 19, 2018 at 13:05 SherylHohman 17.9k1818 gold badges9393 silver badges9696 bronze badges asked Dec 4, 2017 at 5:49 Iman SalehiIman Salehi 95622 gold badges1515 silver badges3737 bronze badges 0

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 15

For others landing on this page due to the same error message as the OP, there are a whole host of issues that can cause same error message.
There is an GitHub issue surrounding this generic error message.

Probably the most common reasons are:

• text to be rendered is not wrapped in <Text> tags
• syntax error in JSX (for example, a ;, or a malformed tag)

• a space between JSX comments and a JSX tag, if you use Prettier
  (it seems Prettier puts an automatic ; insertion,
  (solution: move the JSX comment to its own line)

• some value is assumed to be null, but it's undefined, or an ''(empty string).
  In the case of an '', it would need to be wrapped in <Text> (see 1st item above)

• not wrapping child tags (ScrollView in particular)
• space between two adjacent tags
• an issue with 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.

I highly recommend taking a gander if you are having trouble finding the source of your error: https://github.com/facebook/react-native/issues/13243

As one person 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..

You should Use <Text> to display text in <Button> like this

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

My error was caused by this code:

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

For some reason, I need to coerce caption from a string to a boolean for it to work on Android. (It worked fine on iOS):

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

Hope it helps someone

The error in my case involved Snackbar from react-native-paper.

Wrong:

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

Right:

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

To my surprise, the solution was the opposite of wrapping into a <Text>. Probably a Snackbar-specific thing here.

本文标签：