React props簡単な使い方

そもそもpropsは親から子に要素を渡すヤツ（正直賢い人が書いたの見てもよくわからんから未来の自分がわかるように書く）

親.jsx

     <View>
      <Item />
    </View>

子.jsx

const Item = () => {
  return (
      <View>
        <Image source={{ uri:'httpなんたらかんたら.com' }} />
      </View>
      <View >
        <Text numberOfLines={3}>
          なんたらかんたら
        </Text>
        <Text style={styles.subText}>なんたらかんたら作者</Text>
      </View>
  );
};

上記の奴はまだPropsとか使ってない状態。
これでもちゃんと動くし普通に見れる。

Propsを使って書いてみる

親.jsx

     <View>
      <Item author="なんたらかんたら" imageUrl="httpなんたらかんたら.com" content="なんたらかんたら"/>
    </View>

子.jsx

const Item = (props) => {
  return (
      <View>
        <Image source={{ uri: props.imageUrl }} />
      </View>
      <View >
        <Text numberOfLines={3}>
          {props.content}
        </Text>
        <Text style={styles.subText}>{props.author}</Text>
      </View>
  );
};

これで全く同じPropsを使って全く同じ見た目のものが作れた！

ちなみに子.jsxのPropsを変えてあげると

子.jsx

const Item = ({ imageUrl, content, author }) => {
  return (
      <View>
        <Image source={{ uri: imageUrl }} />
      </View>
      <View >
        <Text numberOfLines={3}>
          {content}
        </Text>
        <Text style={styles.subText}>{author}</Text>
      </View>
  );
};

いちいちPropsって書かなくてもいいようになる。