Felhasználói eszközök

Eszközök a webhelyen


oktatas:telefon:react_native:komponensek_erinthetosege

< React Native

React Native komponensek érinthetősége

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>
oktatas/telefon/react_native/komponensek_erinthetosege.txt · Utolsó módosítás: 2021/09/01 18:21 szerkesztette: admin