[[oktatas:telefon:react_native|< React Native]]

====== React Native komponensek érinthetősége ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu


===== Touchables =====


Vegyük fel egy új importálandó osztályt: TouWF

<code typescript>
import { StyleSheet, Text, TouWF, View, Image, SafeAreaView } from 'react-native';
</code>

<code typescript>
import { StyleSheet, Text, TouchableWithoutFeedback, View, Image, SafeAreaView } from 'react-native';
</code>

<code javascript>
      <TouchableWithoutFeedback onPress={() => console.log('Valami')}>
        <Image           
          source={{
            width: 200,
           height: 300,
            uri: "https://picsum.photos/200/300",
          }} 
        />

      </TouchableWithoutFeedback>
</code>

===== Átlátszóság érintésre =====


Most legyen egy olyan osztály, amely hatására érintéskor a kép áttetszővé válik. 

Használjuk hozzá a TouchableOpacity osztályt:

<code typescript>
import { StyleSheet, Text, TouchableOpacity, View, Image, SafeAreaView } from 'react-native';
</code>


<code javascript>
      <TouchableOpacity onPress={() => console.log('Valami')}>
        <Image           
          source={{
            width: 200,
           height: 300,
            uri: "https://picsum.photos/200/300",
          }} 
        />
      </TouchableOpacity>
</code>


===== Világosság =====


A világosság is változtatható:

<code javascript>
import { StyleSheet, Text, TouchableHighlight, View, Image, SafeAreaView, TouchableWithoutFeedback } from 'react-native';
</code>


<code javascript>
      <TouchableHighlight onPress={() => console.log('Valami')}>
        <Image           
          source={{
            width: 200,
           height: 300,
            uri: "https://picsum.photos/200/300",
          }} 
        />
      </TouchableHighlight>
</code>

===== Natív eszköz =====

Natív feedback:

<code javascript>
import { StyleSheet, Text, TouchableNativeFeedback, View, Image, SafeAreaView, TouchableWithoutFeedback } from 'react-native';
</code>


<code javascript>
      <TouchableNativeFeedback onPress={() => console.log('Valami')}>
        <Image           
          source={{
            width: 200,
           height: 300,
            uri: "https://picsum.photos/200/300",
          }} 
        />
      </TouchableNativeFeedback>
</code>




Kép helyett lehet egy szimpla téglalap:
<code javascript>
      <TouchableNativeFeedback onPress={() => console.log('Valami')}>
        <View style={{ width: 200, height: 70, backgroundColor: "dodgerblue"}}></View>
      </TouchableNativeFeedback>
</code>