【React Native入門】2-3 基本的なUIコンポーネント

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

目次
[ P.68〜P.69 ] Buttonの利用　onPressイベント
[ P.71〜P.74 ] stateの利用
[ P.74〜P.78 ] TextInputの利用
[ P.78〜P.80 ] ネガティブプロパティ操作

---
[ P.68〜P.69 ] Buttonの利用　onPressイベント

`<Button title="タイトル" onPress="処理" />`
`処理 = () => {...}`

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

export default class App extends Component {

  constructor(props) {
    super(props);
    this.title = 'Button Sample';
    this.message = 'Click Me!';
  }

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

  doAction = () => {
    Alert.alert('Your Clicked!');
  }
}

const styles = StyleSheet.create ({
  base: {
    padding: 30
  },
  title: {
    padding: 10,
    color: 'red',
    textAlign: 'center',
    fontSize: 60,
    fontWeight: 'bold',
  },
});
```

---

[ P.71〜P.74 ] stateの利用

ステートの設定: `this.state = { 名前: 値, .... };`
ステートの変更: `this.setState({ 名前: 値, .... });`
コンポーネントへ記述: `{ this.state.名前 }`

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

export default class App extends Component {

  counter  = 0;

  constructor(props) {
    super(props);
    this.title = 'State Sample';
    this.state = { message: 0 };
  }

  render() {
    return (
      <View style={styles.base}>
        <Text style={ styles.title }>{ this.title }</Text>
        <Button title='Click me...' onPress={ this.doAction } />
        <Text style={ styles.message }>{ this.state.message }</Text>
      </View>
    );
  }

  doAction = () => {
    this.setState({ message: ++ this.counter });
  }

}

const styles = StyleSheet.create ({
  base: {
    padding: 30
  },
  title: {
    padding: 10,
    color: 'red',
    textAlign: 'center',
    fontSize: 60,
    fontWeight: 'bold',
  },
  message: {
    padding: 10,
    textAlign: 'center',
    fontSize: 32,
  },
});
```
---

[ P.74〜P.78 ] TextInputの利用

`<TextInput placeholder=テキスト value=テキスト onChangeText={ this.処理 } />
`
`処理 = (text) => this.setState({ text });`

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

export default class App extends Component {

  counter  = 0;

  constructor(props) {
    super(props);
    this.title = 'Text Input Sample';
    this.state = {
      message: 'Your Name?',
      text: '',
      placeholder: 'write here...',
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Text style={ styles.title }>{ this.title }</Text>
        <Text style={ styles.message }>
          { this.state.message }
        </Text>
        <TextInput 
          style={ styles.input }
          placeholder={ this.state.placeholder }
          value={ this.state.text }
          onChangeText={ this.doType }
        />
        <Button style={ styles.button } title='Click me...' onPress={ this.doAction } />
      </View>
    );
  }

  doType = (text) => this.setState({ text });

  doAction = (text) => {
    this.setState({ text: '', message: 'Hello!' + this.state.text, });
  }

}

const styles = StyleSheet.create ({
  base: {
    padding: 30
  },
  title: {
    padding: 10,
    color: 'red',
    textAlign: 'center',
    fontSize: 60,
  },
  message: {
    padding: 10,
    fontSize: 32,
  },
  input: {
    padding: 10,
    fontSize: 16,
  },
});
```

---

[ P.78〜P.80 ] ネガティブプロパティ操作

別の方法で値の変更

`this._textInput.setNativeProps({ 名前: 値,　... });`

ref属性によるコンポーネント設定
`ref={ component => this._textInput =  component }`

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

export default class App extends Component {

  counter  = 0;

  constructor(props) {
    super(props);
    this.title = 'Negative Property Sample';
    this.state = {
      message: 'Your Name?',
      text: '',
      placeholder: 'write here...',
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Text style={ styles.title }>{ this.title }</Text>
        <Text style={ styles.message }>
          { this.state.message }
        </Text>
        <TextInput 
          ref={ component => this._textInput =  component }
          style={ styles.input }
          placeholder={ this.state.placeholder }
          onChangeText={ this.doType }
        />
        <Button style={ styles.button } title='Click me...' onPress={ this.doAction } />
      </View>
    );
  }

  doType = (text) => this.setState({ text });

  doAction = (text) => {
    this.setState({ text: '', message: 'Hello!' + this.state.text, });
    this._textInput.setNativeProps({ text: '' });
  }

}

const styles = StyleSheet.create ({
  base: {
    padding: 30
  },
  title: {
    padding: 10,
    color: 'red',
    textAlign: 'center',
    fontSize: 60,
  },
  message: {
    padding: 10,
    fontSize: 32,
  },
  input: {
    padding: 10,
    fontSize: 16,
  },
});
```