त्रुटि: Invariant उल्लंघन: टच करने योग्य बच्चा या तो देशी या आगे सेट होना चाहिए देशी मूल स्टैक

Question

पर नकारात्मकप्रॉप्स मुझे इस त्रुटि का सामना करने में कठिनाई हो रही है।

मैं क्यों समझ में नहीं आता? मेरे पास एक बच्चा घटक है जो कस्टम घटक का उपयोग नहीं कर रहा है। मैंने Text या Image या Icon को View घटक में लपेट लिया और फिर उन्हें TouchableHighlight में लपेट लिया, फिर भी किसी विशेष पृष्ठ पर त्रुटि प्राप्त हो रही है, लेकिन अन्य पृष्ठों पर नहीं जो एक ही काम कर रहे हैं।

<TouchableHighlight 
     onPress={this.changeTo} style={PictureStyles.btnClickContain} 
     underlayColor='#042417'> 
     <View 
     style={PictureStyles.btnContainer}> 
     <Icon 
      name='fontawesome|calendar' 
      size={25} 
      color='#042' 
      style={PictureStyles.btnIcon}/> 
     <Text style={PictureStyles.btnText}>Book</Text> 
     </View> 
    </TouchableHighlight> 

Answer 1

मैं Composite components and setNativeProps के बारे में किए गए दस्तावेज़ों में निर्देशों का पालन एक बच्चे को setNativeProps अग्रेषित करने के लिए द्वारा मेरे एप्लिकेशन में एक समान त्रुटि को ठीक करने में सक्षम था। दस्तावेज़ों से:

All we need to do is provide a setNativeProps method on our component that calls setNativeProps on the appropriate child with the given arguments.

नीचे आपका कोड मेरे लिए काम किए गए परिवर्तनों के साथ अपडेट किया गया है। मैं react-native-icons का भी उपयोग कर रहा था जैसा कि ऐसा लगता है कि आप भी हैं।

केवल परिवर्तन setNativeProps विधि और ref callback syntax

var MyComponent = React.createClass({ 
    setNativeProps (nativeProps) { 
    this._root.setNativeProps(nativeProps); 
    } 

    render() { 
    return (
     <TouchableHighlight 
     onPress={this.changeTo} style={PictureStyles.btnClickContain} 
     underlayColor='#042417'> 
     <View 
      ref={component => this._root = component} 
      style={PictureStyles.btnContainer}> 
      <Icon 
      name='fontawesome|calendar' 
      size={25} 
      color='#042' 
      style={PictureStyles.btnIcon}/> 
      <Text style={PictureStyles.btnText}>Book</Text> 
     </View> 
     </TouchableHighlight> 
    ); 
    } 
})