无法添加没有YogaNode的孩子-ReactNative

Question

我已经在StackOverflow上广泛阅读了此错误，并尝试了其中提到的所有解决方案，但没有一个起作用。经过大量的试验和错误，我找到了导致此问题的原因，但不知道如何解决。最后几行的'FadeInView'标签导致了此问题，但是当我简单地将其更改为'View'时，问题就解决了。为什么会导致此类错误？

import React, {Component} from 'react';
import {Animated, Dimensions } from 'react-native'
import { Notifications } from 'expo';
import { StyleSheet, Text, View, Image, ScrollView, Button, TouchableWithoutFeedback, TextInput, AsyncStorage} from 'react-native';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
import LinearGradient from 'react-native-linear-gradient';
import AnimatedLinearGradient, {presetColors} from 'react-native-animated-linear-gradient'


import Quotes from './quotes.json';
import Background from './background.json';

class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),
    visible:1
  }

  componentDidMount() {
    Animated.timing(
      this.state.fadeAnim,
      {
        toValue: 1,
        duration: 700,
      }
  ).start();
  }

  componentDidUpdate() {
      this.state.visible = 0;
      if(this.state.visible == 0) {
          Animated.timing(
            this.state.fadeAnim,
            {
              toValue: 0,
              duration: -0,
            }
          ).start();
      }

      this.state.visible = 1;
      if(this.state.visible == 1) {
            Animated.sequence([
            Animated.delay(500),
            Animated.timing(this.state.fadeAnim,{
                toValue: 1,
                duration: 700
            })
        ]).start();
      }

  }

  render() {
    let { fadeAnim } = this.state;
    return (
        <Animated.View style={{ ...this.props.style, opacity: fadeAnim}}>{this.props.children} </Animated.View>
      );
  }
}


export default class App extends React.Component {

    state = {
        activeQuoteIndex: 0,
        backgroundColor: 0,
    }

    onSwipeLeft(gestureState) {
      this.state.activeQuoteIndex= Math.floor(Math.random() * (Quotes.length));
      this.state.backgroundColor= Math.floor(Math.random() * (Background.length));
    }
    onSwipeUp(gestureState) {
      this.state.activeQuoteIndex= Math.floor(Math.random() * (Quotes.length));
      this.state.backgroundColor= Math.floor(Math.random() * (Background.length));
    }

    onSwipe(gestureName, gestureState) {
      const {SWIPE_UP, SWIPE_DOWN, SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
      this.setState({gestureName: gestureName});
      switch (gestureName) {
        case SWIPE_LEFT:
          break;
        case SWIPE_UP:
          break;
      }
  }

    render() {
        const config = {
          velocityThreshold: 0.3,
          directionalOffsetThreshold: 80
      };

        const dimension = {
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height+50
        };

     const quote = Quotes[this.state.activeQuoteIndex];
     return (
         <View style={{backgroundColor: "#000", height: dimension.height,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center'}}>

        <GestureRecognizer
         onSwipe={(direction, state) => this.onSwipe(direction, state)}
         onSwipeLeft={(state) => this.onSwipeLeft(state)}
         onSwipeUp={(state) => this.onSwipeUp(state)}
         config={config}
         style={{
           height:dimension.height-310,
           width: dimension.width,
           backgroundColor: "#000",
           justifyContent: 'center',
           alignItems: 'center',
           borderRadius: 10
         }}
         >

                 <FadeInView style={{width: 380, height: 800, backgroundColor: 'transparent', display: 'flex', justifyContent: 'center', alignItems:'center'}}>
                 <Text style={{fontSize: 24, padding: 40, textAlign: 'center', color: Background[this.state.backgroundColor].background}}>Quote</Text>
                 <Text style={{fontSize: 20, padding: 40, marginBottom:20 ,textAlign: 'center', color: Background[this.state.backgroundColor].background}}>"{quote.quote}"</Text>
                 <View style={{width: 40, height: 2, backgroundColor: Background[this.state.backgroundColor].background, marginBottom:30}}></View>
                 <Text style={{fontSize: 14, padding: 0, textAlign: 'center', color: Background[this.state.backgroundColor].background}}>{quote.author}</Text>
                 </FadeInView>

           </GestureRecognizer>
       </View>
   );
  }
}