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

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

【React-Native】の目次

1. RNのインストール
2. プロジェクトを作成
3. アプリ内メッセージを表示する
4. タッチイベント、ボタン、スクロール

タッチイベント

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

1. TouchableOpacityコンポーネントを追加

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

2. 画面を作る

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

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

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

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

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

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

タッチイベントの種類

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

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

ボタン

1. Buttonコンポーネントを追加

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

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

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

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

);
}
}
```

1. state.randomを表示

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

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

)}
)
}

);
}
}
```

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

   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コンポーネントを追加

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

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

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

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

);
}
}
```

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

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