React Native komponensek érinthetősége

Szerző: Sallai András
Copyright © Sallai András, 2021
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Touchables

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

import { StyleSheet, Text, TouWF, View, Image, SafeAreaView } from 'react-native';

import { StyleSheet, Text, TouchableWithoutFeedback, View, Image, SafeAreaView } from 'react-native';

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

Á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:

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

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

Világosság

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

import { StyleSheet, Text, TouchableHighlight, View, Image, SafeAreaView, TouchableWithoutFeedback } from 'react-native';

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

Natív eszköz

Natív feedback:

import { StyleSheet, Text, TouchableNativeFeedback, View, Image, SafeAreaView, TouchableWithoutFeedback } from 'react-native';

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

Kép helyett lehet egy szimpla téglalap:

      <TouchableNativeFeedback onPress={() => console.log('Valami')}>
        <View style={{ width: 200, height: 70, backgroundColor: "dodgerblue"}}></View>
      </TouchableNativeFeedback>