Reactnative Study Notes (vii) usage and clickable components of the--ref attribute

Today the Crazycodeboy teacher's video read, a little summary:

One, ref property

Ref is a special property of a component that can be understood as a reference to a component after it has been rendered. We can get the real component through the ref attribute.

The specific usage is to import a component in a file that can invoke the method defined in the component through the component's ref attribute, using a small example to specify:

First file: Reftestfather.js

Import react,{component} from ' React ';
Import {View,text} from ' react-native ';
Import Reftest from './reftest ';

Export default class Reftestfather extends component{

  Constructor (props) {
    super (props);
    This.state = {size:0}
  }

  render () {
    return (
      <View>
      <reftest ref= ' reftest '/>   / /Set the ref attribute of the component

        <text
          onpress={() =>{let
          size = This.refs.reftest.getSize ();  Method
          this.setstate ({size:size}) that invokes the component through the component's Ref property;}
      } >size size is {this.state.size}
        </Text>
      </View>
    );}
}

Second file, Reftest.js

Import react,{component} from ' React ';
Import {View,text} from ' react-native ';


Export default class Reftest extends component{

Constructor (props) {
  super (props);
  This.state = {
    size:0,
  }
}
  GetSize () {               //define a GetSize method
    return this.state.size;
  }
  
  Render () {
    return (
      <View>
        <text onpress={() =>{this.setstate ({size:this.state.size+10} )}}> increase </Text>
        <text onpress={() =>{this.setstate ({size:this.state.size-10})}}> Decrease </text >
      </View>
    );
  }
}

This example is, in the Reftest component, by clicking the button to resize size, in Reftestfather, through the Reftest component's ref attribute, get the component itself, call Reftest GetSize () method, so as to get size.

Components can also be obtained by: this.refs[' reftest '.

Or when you define a ref attribute in a component label, you can write ref={reftest=>this.reftest=reftest}; The components can then be obtained by This.reftest.

Two, clickable components (touchable series components)

The Touchable series components can respond to user click events through a package view. Such as:

<touchablewithoutfeedback onpress={() =>{//custom Event}}>

<view style={{width:100,height:100}}/>//through the Touchablewithoutfeedback package, the View can be clicked

</TouchableWithoutFeedback>

The following 4 types of clickable components are available:

1,touchablewithoutfeedback: Responds to a user's Click event and does not display any visual feedback while processing a click event.

2,touchablehighlight: Adds the effect of darkening the background when pressed, based on Touchablewithoutfeedback.

3,touchableopacity: Compared to the effect that touchablehighlight will darken the background when pressed, touchableopacity will reduce the transparency of the button when the user's finger is pressed, without changing the color of the background.

4,touchablenativefeedback: You can also use Touchablenativefeedback on Android, which creates a visual effect like water ripple when the user presses the finger. Note that this component only supports Android.

Touchablehighlight,touchableopacity,touchablenativefeedback Three kinds of components are modified on the basis of touchablewithoutfeedback. Here I mainly talk about some properties of touchablewithoutfeedback.

1,onpress

onpress={() =>{//Custom Click event} This method is called after the user taps

2,onlongpress

onlongpress={() =>{//Custom Long Press Event} This method is called after the user has long pressed the component, and if the property is not defined, the Onpress method is called after the user has pressed the component long.

3,disabled

Disabled = Ture or FALSE. This property is used to disable the click of a component. When set to true, the component does not respond to click events.

4,onpressin

onpressin={() =>{//custom Event} This method is called when the user touches the component

5,onpressout

onpressout={() =>{//custom Event} This method is called when the user's finger leaves the component, whether the finger lifts away from the screen, or continues to press the screen but slides out of the component.

Reference:

Touchable Series Components use detailed

        reactnative ref usage in detail