反応ネイティブの小道具は何ですか？

小道具は、reactコンポーネントを変更するのに役立つプロパティです。作成されたコンポーネントは、小道具の概念を使用してさまざまなパラメーターで使用できます。小道具を使用すると、あるコンポーネントから別のコンポーネントに情報を渡すと同時に、要件に応じてコンポーネントを再利用できます。

ReactJSに精通していれば、小道具に精通しているでしょう。ReactNativeでも同じ概念が続きます。

小道具とは何かを説明する例を見てみましょう。

例1：ReactNative組み込みコンポーネント内の小道具

画像コンポーネントを検討してください-

<Image
   style={styles.stretch} source={{uri: 'https://pbs.twimg.com/profile_images/486929358120964097   /gNLINY67_400x400.png'}}
/>

スタイル およびソース プロパティ、つまり画像コンポーネントの小道具です。スタイルプロップは、幅、高さなどのスタイリングを追加するために使用され、ソースプロップは、ユーザーに表示する画像にURLを割り当てるために使用されます。 Imageコンポーネントのソースとスタイルおよび組み込みの小道具。

以下に示すように、URLを格納する変数を使用して、ソースプロップに使用することもできます-

let imgURI = {
   uri:
'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
};
return (
   <View style={styles.container}>
      <Image style={styles.stretch} source={imgURI} />
   </View>
);

以下の例は、組み込みの小道具を使用した単純な画像の表示を示しています-

import React from "react";
import { Image , Text, View, StyleSheet } from "react-native";

const MyImage = () => {
   let imgURI = {
      uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
   };
   return (
      <View style={styles.container}>
         <Image style={styles.stretch} source={imgURI} />
      </View>
   );
}
const styles = StyleSheet.create({
   container: {
      paddingTop: 50,
      paddingLeft: 50,
   },
   stretch: {
      width: 200,
      height: 200,
      resizeMode: 'stretch',
   }
});
export default MyImage;

例2：カスタムコンポーネント内の小道具

小道具を利用して、あるコンポーネントから別のコンポーネントに情報を送信できます。以下の例では、StudentとSubjectの2つのカスタムコンポーネントが作成されています。

件名コンポーネントは次のとおりです-

const Subject = (props) => {
   return (
      <View>
      <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!</Text>
      </View>
   );
}

コンポーネントはパラメータpropsを取ります。これは、テキストコンポーネント内で、名前をprops.nameとして表示するために使用されます。 StudentコンポーネントからSubjectコンポーネントに小道具を渡す方法を見てみましょう。

Studentコンポーネントは次のとおりです-

const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
      </View>
   );
}

Studentコンポーネントでは、Subjectコンポーネントが名前の小道具とともに使用されます。渡される値は、数学、物理学、化学です。サブジェクトは、名前の小道具に異なる値を渡すことで再利用できます。

これは、StudentコンポーネントとSubjectコンポーネントを出力とともに使用した実例です。

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

const Subject = (props) => {
   return (
      <View>
         <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!      </Text>
      </View>
   );
}
const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
         </View>
   );
}
export default Student;

出力