公式ドキュメントを読む！vol.1(React Native [TouchableOpacity])

はじめに

こんにちは〜
私の大学もやっと春休みに入りました🙌
今春の目標は 開発(React Go Docker/Kubernetes) & Qiitaをたくさん活用する なのですが．
後者に関して，たくさん記事をかけたらなと考えております！

最近はReactNativeでモバイルアプリを作ったり，様々なAPIを使っているのですが，とにかく公式ドキュメントが読めない💦のです．
時間がかかるし，，，英語だし，，．と避けてきたのですが，いつまでもそんなことをしている訳にもいかないので，Qiitaに公式ドキュメントを読んだ備忘録を書くということを目標に頑張って行きたいと思います！

TouchableOpacity

今回はTouchableOpacityに関して読んでいきたいと思います．
公式ページはこちらです．
簡単に言うと，Viewコンポーネントにインタラクションを加えるWrapperのようです．
早速詳しく読んでいきましょう！

内容

ページに遷移すると以下のようにあります．

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.

Viewコンポーネントに触れた時に正確に反応するようにするWrapperで，押下した際に，Opacityが薄くなります．

こんな感じでしょうか🤔
１発目から雑に解釈していますが，こんな感じで進めていきます🙇‍♂️💦

Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.

OpacityはViewの階層構造で追加された小要素のAnimated.ViewをWarpすることで制御されます．レイアウトに影響を及ぼすので注意してください．

難しいです．．． in は何にかかっているのでしょうか．

Example

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

const App = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(prevCount => prevCount + 1);

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
      >
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  }
});

export default App;

こんな感じでテストコードがありますね🤔
確かにPressHereを押すとカウントが増えて，Opacityが薄くなってます．

Reference

今度はReferenceをみていきましょう！
最初に思ったのが，ExampleにonPressとあるのに，Referenceにはないやん！と言うことです💫
どう言うことでしょうか．．．

よくみると，

Inherits TouchableWithoutFeedback Props.

とありました．
なるほど，TouchableWithoutFeedbackを継承していたんですね😄

ページをみると，ありました！

onPress
Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of PressEvent.

タップしてそれが離された瞬間に呼び出されます,ただし取り消されなければ(例えばタップしながらスクロールしたり)．

確かにタップしながらスクロールするとカウントアップされませんでした．
Typeはfunction で RequiredはNo とありますね🤔

TouchableOpacityに戻りますが，今回はonPressしか使わなかったので，割愛します🙇‍♂️

終わりに

TouchableOpacity はユーザビリティを上げる際に頻繁に使えそうですね！
私のアプリでも使っていきたいと思います！

下手くそな翻訳に付き合っていただいてありがとうございました🙇‍♂️
これからも色々なドキュメントを読んでいこうと思うので，よかったらお付き合いください！
ご指南・ご指摘は，ジャンジャン待っています！色々教えていただけたら，幸いです💦

それでは！