【React-Native】タッチイベント、ボタン、スクロール

> 私は日本就職を目指して、勉強している韓国人大学生です。
> もし、内容の中で間違った表現や言葉などがあれば、書き込みをしてください。

## 【React-Native】の目次
1. [RNのインストール](https://qiita.com/JeongJaeSoon/items/dcc15830015a22cb1e1e)
2. [プロジェクトを作成](https://qiita.com/JeongJaeSoon/items/9c470cb6068126844a3c)
3. [アプリ内メッセージを表示する](https://qiita.com/JeongJaeSoon/items/64d94d4ed8f7c5183125)
4. [タッチイベント、ボタン、スクロール](https://qiita.com/JeongJaeSoon/items/032ef2afe5e3ce6cda0b)

## タッチイベント
### `onPress`プロパティでタッチイベント登録
1. `TouchableOpacity`コンポーネントを追加

    ```JSX
    import {View, Text, TouchableOpacity} from 'react-native';
    ```

2. 画面を作る

    ```JSX
    class App extends Component {
      render() {
        return (
          <View>
            <TouchableOpacity>
              <Text>Hello World</Text>
            </TouchableOpacity>
          </View>
        );
      }
    }
    ```

3. `<TouchableOpacity>`にプロパティを追加

    ```JSX
    <TouchableOpacity
      onPress={() => alert("Text touch Event")}
    >
      Hello World
    </TouchableOpacity>
    ```

4. "Hello World"をタッチすると、アラートが生成

### タッチイベントに関するコンポーネント
- [`<TouchableHighlight>`](https://reactnative.dev/docs/touchablehighlight)
    - タッチするとコンポーネントがハイライトする
- [`<TouchableOpacity>`](https://reactnative.dev/docs/touchablehighlight)
    - タッチするとコンポーネントが透明になる
    - コンポーネントにスタイル追加
- [`<TouchableWithoutFeedback>`](https://reactnative.dev/docs/touchablewithoutfeedback)
    - タッチしても、反応がない
    - 親コンポーネントの`<View>`にスタイル追加

### タッチイベントの種類
> 具体的な内容は[Pressableドキュメント](https://reactnative.dev/docs/pressable#onlongpress)を参考してください

- [`onPress`](https://reactnative.dev/docs/pressable#onpress)：押された時の反応
- [`onLongPress`](https://reactnative.dev/docs/pressable#onlongpress)：長く押された時の反応
- [`onPressIn`](https://reactnative.dev/docs/pressable#onpressin)：押されるやいなや反応
- [`onPressOut`](https://reactnative.dev/docs/pressable#onpressout)：押されて手を離した時の反応

## ボタン
1. `Button`コンポーネントを追加

    ```JSX
    import {View, Text, Button} from 'react-native';
    ```

2. `Button`を作成し、`title`プロパティを追加

    ```JSX
    class App extends Component {
      render() {
        return (
          <View>
　　　    　　  <Button title="Add Number" onPress={() => props.add()} />
　　　    　　  <Button title="Delete Number" onPress={() => props.delete()} />
          </View>
        );
      }
    }
    ```

3. `state.random`を表示

    ```JSX
    class App extends Component {
      render() {
        return (
          <View>
　　　    　　  // ...
　　　    　　  {this.state.random.map((item, idx) => {
                   return (
                       <TouchableOpacity
                         key={idx}
                         onPress={() => this.delete(idx)}
                       >
                         <Text>{item}</Text>
                       </TouchableOpacity>
                     )}
                   )
             }
          </View>
        );
      }
    }
    ```

4. 関数とステートを定義

    ```JSX
    class App extends Component {
      state = {
        random: [36, 999]
      }

      /* Add */
      add = () => {
        const randomNum = Math.floor(Math.random() * 100) + 1;
        this.setState(prevState => {
          return {
            random: [...prevState.random, randomNum]
          }
        });
      }

      /* Delete */
      delete = position => {
        const newArray = this.state.random.filter((_, idx) => {
          return position !== idx;
        });

        this.setState({
          random: newArray
        });
      }
      // ...
    }
    ```

## スクロール

> コンポーネントが増え、画面が長くなるとスクロールが必要

### スクロール適用
1. [`ScrollView`](https://reactnative.dev/docs/scrollview)コンポーネントを追加

    ```JSX
    import {View, Text, Button, ScrollView} from 'react-native';
    ```

2. スクロールが必要な部分を`<ScrollView> </ScrollView>`内に入れる

    ```JSX
    class App extends Component {
      render() {
        return (
          <View>
　　　    　　  // ...
　　　    　　  <ScrollView>
　　　    　　      // 「random」配列を出力...
　　　    　　  </ScrollView>
          </View>
        );
      }
    }
    ```

### スクロールコンポーネントの種類
- onMomentumScrollBegin : スクロールした後、自動戻りが始まる時、トリガー
- onMomentumScrollEnd : スクロールした後、自動戻りが終わった時、トリガー
- onScroll : スクロールの移動が始まった時、トリガー
- onContentSizeChange : `<ScrollView>`のサイズが変化される時、トリガー(width、heigthtが必要)
- bounce : スクロールした時、自動バウンスを設定