react-native
小道具

前書き

小道具とは何ですか？

親コンポーネントから子コンポーネントへデータを転送するために、小道具が使用されます。小道具は読み取り専用です。子コンポーネントは、 this.props.keyNameを使用して親から渡された小道具のみを取得できます。小道具を使用すると、彼のコンポーネントを再利用可能にすることができます。

小道具の使用

セットアップが完了したら。下のコードを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);

小道具を使用すると、彼のコンポーネントを汎用的にすることができます。たとえば、Buttonコンポーネントがあります。そのコンポーネントに異なる小道具を渡すことができるので、そのボタンを自分のビューのどこにでも配置することができます。

_{ソース： Props-React Native}

PropType

prop-typesパッケージを使用すると、実行時の型チェックをコンポーネントに追加して、コンポーネントに渡された小道具のタイプが正しいことを確認できます。たとえば、 nameまたはisYummy propを下のコンポーネントに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} />

複数のPropType

1つの小道具に複数の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>
)

Recipe Hello React Native 、かなりクールなハムを言っている<Text>コンポーネントがありますか？

子どものpropypeは

children: PropTypes.node

デフォルトの小道具

defaultPropsでは、コンポーネントのデフォルトの小数点値を設定できます。下の例では、名前propsを渡さないと、Johnが表示されます。そうでない場合は、渡された値が表示されます

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


Example.defaultProps = {
  name: 'John'
}