web-dev-qa-db-ja.com

React native：YogaNodeまたは親ノードを持たない子を追加できません

反応ネイティブを学び始めたばかりで、

次のように、1つの個別のファイル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>

    );
  }
}

それは私にこのエラーを与えます：

enter image description here

今、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>
    );
  }
}

enter image description here

react-nativereact-native-android
32
TapanHP

コンポーネント内のコメントを削除します。

39
Roshan Salian

問題 が同じエラーメッセージを返す理由はいくつかあるため、ここでより一般的な回答をしたいと思います。私が最も見た3つ：

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。 Whitespaces（または実際には任意の文字列）withinが<Text>- Componentにない場合、これを引き起こす可能性があります：

ビューのテキスト例：

    /* This fails */
    return(
      <View>it really does</View>
    );

しかし、2つのコンポーネント間の小さなスペース：

    /* <View>*Space*<Text> fails: */
    return(
      <View> <Text>it really does</Text> </View>
    );

しかし、改行の場合は動作します：

    return(
      <View>
        {/* This works */}
        <Text>surprisingly it does</Text>
      </View>
    );

残念ながら、これらの落とし穴は常にエラーにつながるとは限りません。時には動作します。これは、使用する多くのツール/ライブラリ/コンポーネントのうちどれを使用するか、およびアプリで使用するバージョンに依存すると思います。

33
Pauloco

あなたが提供したコードで問題を再現することができました。解決策は2つあります。

  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. 青色の柔軟な色合いを表示するには、App.jsファイルの<View>コンポーネントにflexを追加するか、（次のステップに応じて、それを削除してルートコンポーネントとして<FlexibleViews>をレンダリングする必要があります。 、とにかくいくつかの子を持つ基本的に<View>コンポーネントであるため。

10
Óskar Helgi Adamsson

render()関数にif elseステートメントがある場合、!!を次のように使用します。

{!! (this.state.your_state) &&
   <View>
        <Text>Your Text</Text>
   </View>
}

の代わりに：

{(this.state.your_state) &&
    <View>
         <Text>Your Text</Text>
    </View>
}
2
S.Hossein Asadollahi

ネイティブバージョンに反応してダウングレードすると、別のエラーが発生しました。基本的には、ビュー内に単純な文字列がありました。

<View>
    MyComponent
</View>

このようなテキストコンポーネントで文字列をラップする必要がありました。

<View>
    <Text>MyComponent</Text>
</View>

それが役立つことを願って

2
jack.the.ripper

私の場合、エラーの原因となったビューの周りに小さな（）括弧がありました。

({renderProgress()})

小さなブラケットを外すとうまくいきました。

{renderProgress()}

1
Adnan

Returnブロックのコメントを削除する "//"誤って ';'を追加したときに同じ問題が発生しました。戻りブロックでは、iOSは正常に動作していますが、Androidにはこのバグ情報があります

1
yubinvip

このエラーは通常、以下の間違いのいずれかによるものです

  • 不要なコメントを削除し、リターン関数からコメントを削除します。
  • 適切な変数名を確認してください。
  • 意図しないセミコロンまたは間違った構文がないか確認してください
1
Rohith M

メソッドをレンダリングするときにセミコロンを削除します

<View style={styles.container}> {this.renderInitialView()} //semi-color should not be here </View>

0
MOHAMMED BASHEER T

このエラーは、render（）return（）関数にコメントがある場合にも発生します。 JSXをレンダリングするときに、リターン関数のすべてのコメントを削除します

0
Nickmccomb

私の場合、レンダリング関数に0を評価する条件がありました。

React Nativeの新しいバージョンでは0 && 'some jsx' breaksのようです。

エラーの例：

render(){
   return <View>
              {this.state.someArray.length && <View>...</View>}
      </View>
}

これは有効なjavascriptである必要があり、0は偽であるため、reactで動作しますが、react nativeでクラッシュします。理由はわかりませんが、次のように少しリファクタリングして動作します。

作業例：

render(){
   return <View>
              {this.state.someArray && this.state.someArray.length> 0 && 
              <View>...</View>}
          </View>
}
0
TacoEater

ちょうど今、同じ問題に遭遇し、Androidスタジオでプロジェクトを編集している間に作成したコメントを削除することで解決しました。コメント化されたコードは、中括弧の開始と終了で囲む必要があります。たとえば、次のコメントは無効です。

/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/

そして、以下は有効なものです：

{/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/}

コメントを中括弧で囲むことのわずかな違いが1つあるだけです。

0
Khan Shahrukh