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

【React-Native】の目次

タッチイベント

`onPress`プロパティでタッチイベント登録

TouchableOpacityコンポーネントを追加

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

画面を作る

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

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

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

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

タッチイベントに関するコンポーネント

<TouchableHighlight>
- タッチするとコンポーネントがハイライトする
<TouchableOpacity>
- タッチするとコンポーネントが透明になる
- コンポーネントにスタイル追加
<TouchableWithoutFeedback>
- タッチしても、反応がない
- 親コンポーネントの<View>にスタイル追加

タッチイベントの種類

具体的な内容はPressableドキュメントを参考してください

onPress：押された時の反応
onLongPress：長く押された時の反応
onPressIn：押されるやいなや反応
onPressOut：押されて手を離した時の反応

ボタン

Buttonコンポーネントを追加

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

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

class App extends Component {
  render() {
    return (
      <View>

　　　　　 props.add()} />
　　　　　 props.delete()} />

);
}
}
```

state.randomを表示

class App extends Component {
  render() {
    return (
      <View>

　　　　　 // ...
　　　　　 {this.state.random.map((item, idx) => {
return (
<TouchableOpacity
key={idx}
onPress={() => this.delete(idx)}
>
{item}

)}
)
}

);
}
}
```

関数とステートを定義

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
    });
  }
  // ...
}

スクロール

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

スクロール適用

ScrollViewコンポーネントを追加

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

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

class App extends Component {
  render() {
    return (
      <View>

　　　　　 // ...
　　　　　
　　　　　 // 「random」配列を出力...
　　　　　

);
}
}
```

スクロールコンポーネントの種類

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