"Image> और <TouchableHighlight> को <View> में डालते समय" React.Children.only एक एकल प्रतिक्रिया तत्व बच्चे को प्राप्त करने की अपेक्षा करता है।

Question

मेरे रिएक्टिव नेटिव कोड में निम्नलिखित रेंडर विधि है:

render() {
    const {height, width} = Dimensions.get('window');
    return (
      <View style={styles.container}>
        <Image 
          style={{
            height:height,
            width:width,
          }}
          source={require('image!foo')}
          resizeMode='cover' 
        />
        <TouchableHighlight style={styles.button}/>
      </View>
    );
  }

यह मुझे ए

React.Children.only एक एकल प्रतिक्रिया तत्व बच्चे को प्राप्त करने की उम्मीद है

त्रुटि। यदि मैं TouchableHighlightघटक निकालता हूं , तो यह ठीक काम करता है। दूसरी ओर, अगर मैं छवि घटक को हटाता हूं, तो यह अभी भी वह त्रुटि देता है। मैं यह नहीं देख सकता कि यह त्रुटि क्यों दे रहा है, और <View>प्रतिपादन के लिए इसके अंदर एक से अधिक घटक होने में सक्षम होना चाहिए।
कोई विचार?

Answer 1

ऐसा लगता है कि <TouchableHighlight>बिल्कुल एक बच्चा होना चाहिए। डॉक्स का कहना है कि यह केवल एक बच्चे का समर्थन करता है और एक से अधिक को इसमें लपेटा जाना चाहिए <View>, लेकिन ऐसा नहीं है कि इसमें कम से कम (और सबसे अधिक) एक बच्चा होना चाहिए। मैं बिना किसी पाठ / छवि के एक सादे रंग का बटन रखना चाहता था, इसलिए मैंने एक बच्चे को जोड़ने के लिए यह आवश्यक नहीं समझा।

मैं यह इंगित करने के लिए डॉक्स अपडेट करने का प्रयास करूंगा।

Answer 2

<TouchableHighlight>तत्व त्रुटि का स्रोत है। <TouchableHighlight>तत्व चाइल्ड तत्व होना आवश्यक है ।

कोड को इस तरह चलाने की कोशिश करें:

render() {
    const {height, width} = Dimensions.get('window');
    return (
        <View style={styles.container}>
            <Image 
                style={{
                    height:height,
                    width:width,
                }}
                source={require('image!foo')}
                resizeMode='cover' 
            />
            <TouchableHighlight style={styles.button}>
                <Text> This text is the target to be highlighted </Text>
            </TouchableHighlight>
        </View>
    );
}

Answer 3

हां, वास्तव में आपको अपने अंदर एक बच्चा पैदा करने की जरूरत है <TouchableHighlight>।

और, यदि आप अपनी फ़ाइल को प्रदूषित नहीं करना चाहते हैं तो Viewsआप उसी को प्राप्त करने के लिए React Fragments का उपयोग कर सकते हैं ।

<TouchableWithoutFeedback>
  <React.Fragment>
   ...
  </React.Fragment>
</TouchableWithoutFeedback>

या इससे भी बेहतर प्रतिक्रिया प्रतिक्रियाओं के लिए एक छोटा वाक्यविन्यास है । तो उपरोक्त कोड नीचे लिखा जा सकता है:

<TouchableWithoutFeedback>
  <>
   ...
  </>
</TouchableWithoutFeedback>

Answer 4

मेरे पास भी यही त्रुटि थी, तब भी जब मेरे पास केवल एक बच्चा था TouchableHighlight। मुद्दा यह था कि मैंने कुछ और लोगों ने टिप्पणी की थी लेकिन गलत तरीके से। सुनिश्चित करें कि आप उचित टिप्पणी कर रहे हैं: http://wesbos.com/react-jsx-comments/

Answer 5

बस के बाद TouchableWithoutFeedbackया इस तरह से <TouchableHighlight>सम्मिलित <View>करने पर आपको यह त्रुटि नहीं मिलेगी। ऐसा क्यों तब @Pedram उत्तर या अन्य उत्तर पर्याप्त बताते हैं।

Answer 6

आमतौर पर यह TochableHighlight में होता है। वैसे भी त्रुटि का मतलब है कि आपको जो भी घटक है उसके अंदर एकल तत्व का उपयोग करना चाहिए।

समाधान: आप माता-पिता के अंदर एकल दृश्य का उपयोग कर सकते हैं और उस दृश्य के अंदर कुछ भी उपयोग किया जा सकता है। संलग्न चित्र देखें

यहाँ छवि विवरण दर्ज करें

Comments

ढेर अतिप्रवाह में आपका स्वागत है। कृपया ऐसी चीज़ों का वर्णन करने के लिए पाठ की छवियों का उपयोग न करें, जिन्हें आसानी से टाइप किया जा सकता है और फिर आपके लिए उपलब्ध मार्कडाउन सुविधा का उपयोग करके स्वरूपित किया जा सकता है।

— chb

Answer 7

1. <TouchableHighlight> तत्व में केवल एक बच्चा हो सकता है
2. सुनिश्चित करें कि आपने छवि आयात की है

Answer 8

मेरे मामले में, मुझे बस एक लाइन नीचे करनी होगी:

यह एक त्रुटि फेंकता है:

export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}> {props.children}
  </TouchableWithoutFeedback>;
}

हालांकि यह एक त्रुटि नहीं है:

export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}>
    {props.children}
  </TouchableWithoutFeedback>;
}