react-native
रंगमंच की सामग्री

परिचय

प्रॉप्स क्या हैं?

Props का उपयोग पैरेंट से चाइल्ड कंपोनेंट में डेटा ट्रांसफर करने के लिए किया जाता है। प्रॉप्स केवल पढ़े जाते हैं। चाइल्ड कंपोनेंट केवल माता-पिता से प्राप्त प्रॉप्स को इस का उपयोग करके प्राप्त कर सकते हैं। Props.keyName । प्रॉप्स का उपयोग करने से उसका घटक पुन: प्रयोज्य हो सकता है।

सहारा का उपयोग

एक बार सेटअप पूरा हो गया। index.ios.js का उपयोग करने के लिए index.android.js या index.ios.js फ़ाइल के नीचे दिए गए कोड को कॉपी करें।

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

प्रॉप्स का उपयोग करने से व्यक्ति अपने घटक को सामान्य बना सकता है। उदाहरण के लिए, आपके पास एक बटन घटक है। आप उस घटक को विभिन्न प्रॉप्स पास कर सकते हैं, ताकि कोई भी उस बटन को अपने विचार में कहीं भी रख सके।

_{स्रोत: प्रॉप्स-रिएक्टिव नेटिव}

PropTypes

prop-types पैकेज आपको अपने घटक में रनटाइम प्रकार की जाँच को जोड़ने की अनुमति देता है जो घटक को पारित होने वाले प्रकारों को सुनिश्चित करता है कि वे सही हैं। उदाहरण के लिए, यदि आप किसी घटक को name या isYummy नहीं करते हैं, तो वह विकास मोड में कोई त्रुटि देगा। उत्पादन मोड में प्रोप प्रकार की जाँच नहीं की जाती है। propTypes को परिभाषित करना आपके घटक को अधिक पठनीय और बनाए रखने योग्य बना सकता है।

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { AppRegistry, Text, View } from 'react-native';

import styles from './styles.js';

class Recipe extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    isYummy: PropTypes.bool.isRequired
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.props.name}</Text>
        {this.props.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
      </View>
    )
  }
}

AppRegistry.registerComponent('Recipe', () => Recipe);


// Using the component
<Recipe name="Pancakes" isYummy={true} />

एकाधिक PropTypes

तुम भी एक सहारा के लिए कई propTypes हो सकते हैं। उदाहरण के लिए, मैं जो नाम ले रहा हूं, वह एक वस्तु भी हो सकती है, मैं इसे लिख सकता हूं।

static propTypes = {
  name: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
  ])
}

बच्चे सहारा

children एक विशेष प्रॉप्स भी है, जिसे पसंद नहीं किया जाता है

<Recipe children={something}/>

इसके बजाय, आपको यह करना चाहिए

<Recipe>
  <Text>Hello React Native</Text>
</Recipe>

तो आप पकाने की विधि के रेंडर में ऐसा कर सकते हैं:

return (
  <View style={styles.container}>
    {this.props.children}
    {this.props.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
  </View>
)

आप एक होगा <Text> अपने में घटक Recipe कह Hello React Native , सुंदर हम शांत?

और बच्चों का प्रचार है

children: PropTypes.node

डिफ़ॉल्ट प्रॉप्स

defaultProps आपको अपने घटक के लिए डिफ़ॉल्ट प्रोप मान सेट करने की अनुमति देता है। नीचे दिए गए उदाहरण में यदि आप प्रॉप नाम को पास नहीं करते हैं, तो यह जॉन को प्रदर्शित करेगा अन्यथा यह पारित मूल्य प्रदर्शित करेगा

class Example extends Component {
  render() {
    return (
      <View>
        <Text>{this.props.name}</Text>
      </View>
    )
  }
}


Example.defaultProps = {
  name: 'John'
}