"Facebook's UI development Framework react" Introduction to the Nine "button (iOS platform)-goodmao

Source: Internet
Author: User


---------------------------------------------------------------------------------------------------React.native is an open source JavaScript-based open-source framework for Facebook,apps that are handy for developing mobile devices. Moreover, it is convenient to update the UI and data of the app, and it is easy to deploy. Goodmao hope to help you get started quickly! ----------------------------------------------------------------------------------------------------

Reference:Highlight button:Https://facebook.github.io/react-native/docs/touchablehighlight.html#contentTransparent button:Https://facebook.github.io/react-native/docs/touchableopacity.html#contentNo feedback button:Https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#content
Style Style:http://facebook.github.io/react-native/docs/view.html#style View view:http://facebook.github.io/ React-native/docs/style.html#contentImage:Https://facebook.github.io/react-native/docs/image.html#contentColor reference:http://www.w3school.com.cn/html/html_colors.asp Source Code Reference:layout.h/.c File----------------------------------------------------------------------------------------------------


In this section, we briefly introduce the use of the React button, which is intended to allow everyone to understand and learn the usage within minutes. I also looked at N posts and Facebook stickers (see links above), in general, there are the following questions: 1. It is not possible for beginners to paste into the demo code directly to understand and use, 2. Many of the posts are not perfect or even wrong in translation and writing. I have been programmed to run, in here the explanation and case, in order to facilitate everyone, have specially written a very simple example, but contains the most commonly used, must use features.

First, Button introduction:A button is a control that the user interacts with, and the user can click on the trigger event to allow the app to perform the corresponding function.
(1) React button has three kinds of 1. When the Touchablehighlight button is pressed, the button will have a highlight effect.    That is, the system sets a view on the button, and when the user presses it, it dims the view and reduces the transparency, prompting the user to press the button.    2. Transparent Touch button touchableopacity when pressed, the button view renders a translucent effect, and the background view of the button can be seen. 3. No feedback touch button touchablewithoutfeedback When pressed, the button does not change, but the set response method is called by the system.
(2) The Event handling button for the React button has four events associated with it: 1. Button press event: Onpress-Press and release button to trigger the event 2. Button Long Press event: onlongpress-Press and hold the button without releasing it will trigger the event 3 . Button press Event: Onpressin-Pressing the button without releasing will trigger the event 4. Button Release Event: Onpressout-The event is triggered when the button is pressed, released, or when the button is pressed to move the finger outside the button area
(3) button representation    1. Text button    Set text on a button
    2. Picture button    Set the picture on the button    The image source can also be a static picture added directly to the project, or it can be a picture from the Web.    For picture settings, you can refer to the previous section, Introduction to using image.
second, how to use the button
(1) Setting the mode and creating the react variable
' Use strict '; var React = require (' react-native '); var {  appregistry,  StyleSheet,  View,  Text,  Image,  //1. Highlight Touch  touchablehighlight,  //2. Opaque Touch  touchableopacity,  //3. No Feedback touch  Touchablewithoutfeedback,} = React;



(2) Define Style
var styles = stylesheet.create ({  container: {    //flex:1,    justifycontent: ' Center ',    alignitems: ' Center ',    backgroundcolor: ' Cyan ',  },  size: {    width:140,    height:95,  },  ButtonText: {    fontsize:28,    color: ' White ',    alignself: ' Center '  },  button: {    width:140,    height:95,    //flex:1,    //flexdirection: ' Row ',//Sub-view line, default is a column    backgroundcolor: ' Blue ',    bordercolor: ' Blue ',    borderwidth:1,    borderradius:8,  },});


(3) Creating a Component Object
var helloreact = React.createclass ({//Defines the button response event handling method//1. Press Onpressed_btn () {console.log (' button pressed! ');  },//2. Long press Onlongpress_btn () {console.log (' button onlongpress! ');  },//3. When pressed-pressing the button without releasing will trigger the event onpressin_btn () {console.log (' button onpressin! ');  },//4. When the button is released//-press the button to release, or press the button to move the finger outside the button area onpressout_btn () {console.log (' button onpressout! '); },//1. Highlight Touch Touchablehighlight-When pressed, the button will have a highlight effect//2. Transparent touch touchableopacity-When pressed, the button is translucent and can see the background//3. No Feedback touch Touchablewit Houtfeedback-When pressed, the button does not change, but the binding response method is called by the System//Render method Render:function () {return (<view style={styl                es.container}> <touchablehighlight style = {Styles.button} onpress={this.onpressed_btn}>              <image source={require (' Image!goodmao ')} style={styles.size}/> </TouchableHighlight> <touchableopacity style = {Styles.button} onpress={this.onpressed_b Tn}>            <image source={require (' Image!goodmao ')} style={styles.size}/> </TouchableOpacity> <touchablewithoutfeedback style = {Styles.button} onpress={this.onpressed_                 btn}> <image source={require (' Image!goodmao ')} style={styles.size}    /> </TouchableWithoutFeedback> </View>); }});


Description: 1. Defines four methods for handling the name of the button event method, its own definition, and attention to readability. A. Press onpressed_btn () b. Long press ONLONGPRESS_BTN () c. When pressed ONPRESSIN_BTN () d. When the button is released Onpressout_btn ()
2. Associating button events and event handling methods in the properties of the button, specify the button event and the corresponding method.
<touchablehighlight                  style = {Styles.button}                 onpress = {THIS.ONPRESSED_BTN}                 onlongpress = { THIS.ONLONGPRESS_BTN}                 onpressin = {THIS.ONPRESSIN_BTN}                 onpressout = {this.onpressout_btn}                >                <text style={styles.buttontext}> I'm the button </Text></TouchableHighlight>



(4) Registration of components
Appregistry.registercomponent (' Helloreact ', () =>helloreact);


(5) Run 1. Three kinds of buttons

2. The Highlight button is pressed

3. The transparent button is pressed


4. No Feedback button is pressed



Iii. Precautions (1) You must set a child view of the button in other words, the button must set the displayed text or picture, otherwise it will error. Example: <touchablehighlight style = {Styles.button} onpress = {this.onpressed_btn}> <text s tyle={styles.buttontext}> I am button </Text> </TouchableHighlight> compile runtime, Xcode error is as follows: Message:invariant Violation:onlychild must is passed a children with exactly one child. "
(2) Two methods of setting text button
<touchablehighlight style = {Styles.button} onpress = {this.onpressed_btn}>     <text style={ Styles.buttontext}> I'm the button </Text></TouchableHighlight>

<touchablehighlight style = {Styles.button} onpress={this.onpressed_btn}>      <view Style={styles.button} >            <text style={styles.buttontext}> I'm the button </Text>      </View></TouchableHighlight>




Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Facebook UI Development Framework react Introduction to the Nine button (iOS platform)-goodmao

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.