【React Native入門】2-3 コンポーネント作成

「React Native入門　掌田 津耶乃著」にて動作確認したコードを逐一まとめた記事です。
基本は自分用のメモですので、動作確認したい場合ご利用ください。
ある程度は1記事を更新していき、セッションが切り替わったら別記事に残していこうと思います。

目次
[ P.82〜P.84 ] Welcomeコンポーネントを使う
[ P.84〜P.85 ] 属性を用意する
[ P.85〜P.87 ] コンストラクタとprops　<font color="Red">※注.動作確認したが変わらなかった</font>
[ P.87〜P.91 ] イメージ表示コンポーネント

---

[ P.82〜P.84 ] Welcomeコンポーネントを使う

```js:コンポーネントクラス定義

class 名前 extends Component {
  render() {
    return ( ...表示内容... );
  }
}
```

```js:jsx側で描画
<名前 />
```

```js:App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Button, TextInput, Text, View } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.title = 'Component Create';
    this.state = {
      message: '',
      text: '',
      placeholder: '',
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Text style={ styles.title }>{ this.title }</Text>
        <Text style={ styles.message }>Appコンポーネント描画 => Hello!</Text>
        <Welcome />
      </View>
    );
  }
}

class Welcome extends Component {
  render() {
    return (
      <Text style={ styles.message }>Welcomeコンポーネント描画 => Welcome!</Text>
    );
  }
}

const styles = StyleSheet.create ({
  base: {
    padding: 25
  },
  title: {
    padding: 35,
    color: 'red',
    textAlign: 'center',
    fontSize: 25,
  },
  message: {
    padding: 10,
    fontSize: 15,
  },
});
```
---

[ P.84〜P.85 ] 属性を用意する
1個のコンポーネントを属性をつけることにより、
jsx側で汎用的に使いまわすことができる。

```js:コンポーネントクラス定義
class 名前 extends Component {
  render() {
    return ( 
      ...{ this.props.属性名 }...
    );
  }
}
```

```js:jsx側で描画
<名前 属性名="値1" />
<名前 属性名="値2" />
<名前 属性名="値3" />
<名前 属性名="値4" />
```

```js:App.js
...

export default class App extends Component {
  constructor(props) {
    super(props);
    this.title = 'Hello!';
    this.state = {
      message: '',
      text: '',
      placeholder: '',
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Text style={ styles.title }>{ this.title }</Text>
        <Welcome name="Taro" />
        <Welcome name="Hanako" />
      </View>
    );
  }
}

class Welcome extends Component {
  render() {
    return (
      <Text style={ styles.message }>
        こんにちは、{ this.props.name }さん！
      </Text>
    );
  }
}

...
```
---

[ P.85〜P.86 ] コンストラクタとprops
<font color="Red">※注.動作確認したが変わらなかった</font>

---

[ P.87〜P.91 ] イメージ表示コンポーネント
「/assets/image.jpg」を用意（とりあえず300×300の軽い画像を作る）

```js:コンポーネントクラス定義
{/* フォルダから読み込み */}
<Image
 style={ styles.スタイル名 }
 source={ require('./assets/ファイル名') }
/>

{/* Webから読み込み(なぜか読み込まれない...) */}
<Image
 style={ styles.スタイル名 }
 source={{uri:'https://...'}}
/>
```

```js:App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Button, TextInput, Image, Text, View } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.title = 'Image';
    this.state = {
      message: '',
      text: '',
      placeholder: '',
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Text style={ styles.title }>{ this.title }</Text>
        <Welcome name="Taro" />
      </View>
    );
  }
}

class Welcome extends Component {
  render() {
    return (
      <View style={ styles.welcome }>

        {/* フォルダから読み込み */}
        <Image
          style={ styles.image }
          source={ require('./assets/image.jpg') }
        />

        {/* Webから読み込み(なぜか読み込まれない...) */}
        {/* <Image
          style={ styles.image }
          source={{uri:'https://facebook.github.io/react-native/img/header_logo.png'}}
        /> */}

        <Text style={ styles.message }>
          Welcome to { this.props.name }
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create ({
  base: {
    padding: 25
  },
  title: {
    padding: 35,
    color: 'skyblue',
    textAlign: 'center',
    fontSize: 25,
  },
  message: {
    padding: 10,
    color: '#fff',
    fontSize: 15,
  },
  welcome: {
    padding: 10,
    alignItems: 'center',
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: '#696969',
    backgroundColor: 'skyblue'
  },
  image: {
    borderStyle: 'solid',
    borderWidth: 3,
    borderColor: '#fff',
  }
});
```

---
※cf.コピー用

```js:コンポーネント雛形
import React, { Component } from 'react';
import { StyleSheet, Alert, Button, TextInput, Text, View } from 'react-native';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.title = 'Welcome Component';
    this.state = {
      message: '',
      text: '',
      placeholder: '',
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Text style={ styles.title }>{ this.title }</Text>
        <Text style={ styles.message }>Hello!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create ({
  base: {
    padding: 25
  },
  title: {
    padding: 35,
    color: 'red',
    textAlign: 'center',
    fontSize: 25,
  },
  message: {
    padding: 10,
    fontSize: 15,
  },
});
```