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