在做App開發過程中離不了的需要使用者互動，說到互動，我們首先會想到的就是按鈕了，在React Native中沒有專門的按鈕元件。 為了能讓檢視能夠響應用的的點選事件，我們需要藉助Touchablexxx元件，來包裹我們的檢視。為什麼說是Touchablexxx呢，因為它不只是一個元件，而是一組元件，一下四個元件都可以用來包裹檢視來響應使用者的點選事件。

• TouchableWithoutFeedback：響應使用者的點選事件，如果你想在處理點選事件的同時不顯示任何視覺反饋，使用它是個不錯的選擇。
• TouchableHighlight：在TouchableWithoutFeedback的基礎上添加了當按下時背景會變暗的效果。
• TouchableOpacity：相比TouchableHighlight在按下去會使背景變暗的效果，TouchableOpacity會在使用者手指按下時降低按鈕的透明度，而不會改變背景的顏色。
• TouchableNativeFeedback：在Android上還可以使用TouchableNativeFeedback，它會在使用者手指按下時形成類似水波紋的視覺效果。注意，此元件只支援Android。

心得：以上四個元件，其中TouchableHighlight、TouchableOpacity以及TouchableNativeFeedback都是在TouchableWithoutFeedback的基礎上做了一些擴充套件，我們從它們的原始碼中可以看出：

TouchableHighlight：

var TouchableHighlight = React.createClass({
  propTypes: {
    ...TouchableWithoutFeedback.propTypes,

TouchableOpacity：

var TouchableOpacity = React.createClass({
  mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin],

  propTypes: {
    ...TouchableWithoutFeedback.propTypes,
 

TouchableNativeFeedback:

var TouchableNativeFeedback = React.createClass({
  propTypes: {
    ...TouchableWithoutFeedback.propTypes,

因為TouchableWithoutFeedback有其它三個元件的共同屬性，所以我們先來學習一下TouchableWithoutFeedback。

TouchableWithoutFeedback使用詳解

TouchableWithoutFeedback一個Touchable系列元件中最基本的一個組價，只響應使用者的點選事件不會做任何UI上的改變，在使用的過程中需要特別留意。

提示：無論是TouchableWithoutFeedback還是其他三種Touchable元件，都是在根節點都是隻支援一個元件，如果你需要多個元件同時相應單擊事件，可以用一個View將它們包裹著，它的這種根節點只支援一個元件的特性和ScrollView很類似。

接下來讓我們來看一下，TouchableWithoutFeedback有哪些常用的屬性：

TouchableWithoutFeedback常用的屬性

說到常用的屬性TouchableWithoutFeedback首先要提到的就是onPress了。

onPress function

當觸控操作結束時呼叫，但如果被取消了則不呼叫（譬如響應者被一個滾動操作取代）。

心得：onPress可謂是Touchable系列元件的最常用的屬性之一了，如果你要讓檢視響應使用者的單擊事件，那麼用onPress就可以了。

接下來呢，我們就來使用onPress屬性來實現一個統計按鈕單擊次數的例子。

<TouchableWithoutFeedback
    onPress={()=> {
        this.setState({count: this.state.count+1})
    }}
>
    <View style={styles.button}>
        <Text style={styles.buttonText}>
            我是TouchableWithoutFeedback,單擊我
        </Text>
    </View>
</TouchableWithoutFeedback>
<Text style={styles.text}>您單擊了:{this.state.count}次</Text>

下載原始碼

onLongPress function

當用戶長時間按壓元件(長按效果)的時候呼叫該方法。

心得：onLongPress也是Touchable系列元件的最常用的屬性之一，通常用於響應長按的事件，如長按列表彈出刪除對話方塊等。

接下來呢，我們就來使用onLongPress屬性來響應使用者的長按事件。

<TouchableWithoutFeedback
    onPress={()=> {
        this.setState({count: this.state.count + 1})
    }}
    onLongPress={()=> {
        this.setState({countLong: this.state.countLong + 1})
        Alert.alert(
            '提示',
            '確定要刪除嗎?',
            [
                {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                {text: '確實', onPress: () => console.log('OK Pressed')},
            ]
        )
    }}
>
    <View style={styles.button}>
        <Text style={styles.buttonText}>
            我是TouchableWithoutFeedback,單擊我
        </Text>
    </View>
</TouchableWithoutFeedback>
<Text style={styles.text}>您單擊了:{this.state.count}次</Text>
<Text style={styles.text}>您長按了:{this.state.countLong}次</Text>

下載原始碼

我們在上面例子的基礎上為Touchable設定了onLongPress屬性，當用戶長時間按壓按鈕是會彈出一個對話方塊。

心得：當我們沒有對Touchable元件設定onLongPress屬性而設定了onPress屬性的時候，我們長按按鈕之後會回撥onPress方法。另外，我們也可以通過delayLongPress 方法來這設定從onPressIn被回撥開始，到onLongPress被呼叫的延遲。

disabled bool

如果設為true，則禁止此元件的一切互動。

心得：disabled也是Touchable系列元件的最常用的屬性之一，通常用於禁止按鈕相應使用者的點選事件，比如，當用戶單擊按鈕進行登入時，需要進行網路請求，在請求操作完成之前如果使用者多次單擊登入按鈕我們通常不希望發起多次登入請求，這個時候就可以藉助disabled的屬性來禁用按鈕的互動。

接下來呢，我們就來模擬使用者登入的例子來介紹一下disabled的使用。

<TouchableWithoutFeedback
    disabled={this.state.waiting}
    onPress={()=> {
        this.setState({text:'正在登入...',waiting:true})
        setTimeout(()=>{
            this.setState({text:'網路不流暢',waiting:false})
        },2000);

    }}
>
    <View style={styles.button}>
        <Text style={styles.buttonText}>
           登入
        </Text>
    </View>
</TouchableWithoutFeedback>
<Text style={styles.text}>{this.state.text}</Text>

下載原始碼

在上面例子中我們模擬了使用者登入的效果，預設狀態下按鈕是可以響應使用者點選事件的，在正在登入過程中我們通過disabled屬性來禁用了按鈕，這時無論是單擊還是長按按鈕都是沒有任何響應的，在停隔2s後，我們又將按鈕解除禁用，這時按鈕又可以重新響應使用者的點選事件了。 當用戶長時間按壓按鈕時會彈出一個對話方塊。

心得：有朋友問我，想禁用按鈕，但是通過設定Touchable的accessible 屬性為false沒有效果，這也是因為即使accessible為false的情況下，Touchable元件還是可以響應互動事件的，要想禁用Touchable的互動事件，只能通過disabled屬性。

onPressIn function與onPressOut function

這兩個方法分別是當用戶開始點選按鈕時與點選結束後被回撥。

通過這兩個方法我們可以計算出使用者單擊按鈕所用的時長， 另外也可以做一些其它個性化的功能。現在我們將通過一個例子來計算出使用者點選按鈕所用的時長。

<TouchableWithoutFeedback
    onPressIn={()=> {
        this.setState({text:'觸控開始',startTime:new Date().getTime()})
    }}
    onPressOut={()=>{
        this.setState({text:'觸控結束,持續時間:'+(new Date().getTime()-this.state.startTime)+'毫秒'})
    }}
>
    <View style={styles.button}>
        <Text style={styles.buttonText}>
            點我
        </Text>
    </View>
</TouchableWithoutFeedback>
<Text style={styles.text}>{this.state.text}</Text>

下載原始碼

在上述例子中我們記錄下使用者單擊按鈕的時間戳，當單擊結束後我們獲取當前時間減去剛單擊時的時間，它們的差值就是使用者單擊按鈕所用的時間了。

心得：另外我們也可以通過delayPressIn與delayPressOut兩個方法來分別設定，從使用者點選按鈕到onPressIn 被回撥的延時與從點選結束到onPressOut 被回撥時的延時。

TouchableHighlight使用詳解

TouchableHighlight 是Touchable系列元件中比較常用的一個，它是在TouchableWithoutFeedback的基礎上添加了一些UI上的擴充套件，既當手指按下的時候，該檢視的不透明度會降低，同時會看到相應的顏色(檢視變暗或者變亮)，從TouchableHighlight 的原始碼中我們可以看出，其實這個顏色就是在TouchableHighlight 的最外層個添加了一個View，通過改變這個View的背景色及透明度來達到這一效果。

  render: function() {
    return (
      <View
        accessible={this.props.accessible !== false}
        accessibilityLabel={this.props.accessibilityLabel}
        accessibilityComponentType={this.props.accessibilityComponentType}
        accessibilityTraits={this.props.accessibilityTraits}
        ref={UNDERLAY_REF}
        style={this.state.underlayStyle}
        onLayout={this.props.onLayout}
        hitSlop={this.props.hitSlop}
        onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
        onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
        onResponderGrant={this.touchableHandleResponderGrant}
        onResponderMove={this.touchableHandleResponderMove}
        onResponderRelease={this.touchableHandleResponderRelease}
        onResponderTerminate={this.touchableHandleResponderTerminate}
        testID={this.props.testID}>
        {React.cloneElement(
          React.Children.only(this.props.children),
          {
            ref: CHILD_REF,
          }
        )}
        {Touchable.renderDebugView({color: 'green', hitSlop: this.props.hitSlop})}
      </View>
    );
  }

TouchableHighlight所擴展出來的屬性

activeOpacity number

我們可以通過activeOpacity來設定TouchableHighlight 被按下時的不透明度，從TouchableHighlight 的原始碼中可以看出，它的預設不透明度為0.85，我們可以根據需要進行調節。

var DEFAULT_PROPS = {
  activeOpacity: 0.85,
  underlayColor: 'black',
};

underlayColor color

我們可以通過underlayColor 屬性來設定TouchableHighlight 被按下去的顏色，預設狀態下為balck黑色。

onHideUnderlay function

當襯底(也就是上文講到的最外層的View)被隱藏的時候呼叫。

心得，通常情況下，當手指結束點選時襯底會被隱藏。

onShowUnderlay function

當襯底(也就是上文講到的最外層的View)顯示的時候呼叫。

心得，通常情況下，當手指剛開始點選時襯底會顯示。

style View#style

因為TouchableHighlight 的最外層個添加了一個View，所以我們可以設定這個View的樣式來做出一個形形色色的按鈕。

接下來，我們通過一個例子來看一下這些屬性的使用。

<TouchableHighlight
    style=
    activeOpacity={0.7}
    underlayColor='green'
    onHideUnderlay={()=>{
        this.setState({text:'襯底被隱藏'})
    }}
    onShowUnderlay={()=>{
        this.setState({text:'襯底顯示'})
    }}
    onPress={()=>{

    }}
>
    <View style={styles.button}>
        <Text style={styles.buttonText}>
            TouchableHighlight
        </Text>
    </View>
</TouchableHighlight>
<Text style={styles.text}>{this.state.text}</Text>

下載原始碼

TouchableOpacity使用詳解

TouchableOpacity也是Touchable系列元件中比較常用的一個，它是在TouchableWithoutFeedback的基礎上添加了一些UI上的擴充套件，但這些擴充套件相比TouchableHighlight 少了一個額外的顏色變化。它是通過在按下去改變檢視的不透明度來表示按鈕被點選的。

TouchableOpacity所擴展出來的屬性

在擴充套件屬性方面TouchableOpacity相比TouchableHighlight，就少了很多，只有一個activeOpacity，來設定按下去的透明度。

activeOpacity number

同，TouchableHighlight 的activeOpacity。

另外我們也可以通過TouchableOpacity的setOpacityTo(value, duration)方法來動態修改TouchableOpacity被按下去的不透明度。

TouchableNativeFeedback使用詳解

為了支援Android5.0新增的觸控反饋，React Native加入了TouchableNativeFeedback 元件，TouchableNativeFeedback 在TouchableWithoutFeedback 所支援的屬性的基礎上增加了按下去的水波紋效果。我們可以通過background 屬性來自定義原生觸控操作反饋的背景。

TouchableNativeFeedback所擴展出來的屬性

background backgroundPropType

決定在觸控反饋的時候顯示什麼型別的背景。它接受一個有著type屬性和一些基於type屬性的額外資料的物件。推薦使用以下的靜態方法之一來建立這個物件：

1) TouchableNativeFeedback.SelectableBackground() - 會建立一個物件，表示安卓主題預設的對於被選中物件的背景。(?android:attr/selectableItemBackground)

2) TouchableNativeFeedback.SelectableBackgroundBorderless() - 會建立一個物件，表示安卓主題預設的對於被選中的無邊框物件的背景。(?android:attr/selectableItemBackgroundBorderless)。只在Android API level 21+適用。

3) TouchableNativeFeedback.Ripple(color, borderless) - 會建立一個物件，當按鈕被按下時產生一個漣漪狀的背景，你可以通過color引數來指定顏色，如果引數borderless是true，那麼漣漪還會渲染到檢視的範圍之外。（參見原生的actionbar buttons作為該效果的一個例子）。這個背景型別只在Android API level 21+適用也就是Android5.0或以上裝置。

<TouchableNativeFeedback
    onPress={()=>{
        this.setState({count: this.state.count + 1})
    }}
    background={TouchableNativeFeedback.SelectableBackground()}>
    <View style=>
        <Text style=>TouchableNativeFeedback</Text>
    </View>
</TouchableNativeFeedback>
<Text style={styles.text
            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

    
    
React Native按鈕詳解|Touchable系列元件使用詳解
     
 
                

在做App開發過程中離不了的需要使用者互動，說到互動，我們首先會想到的就是按鈕了，在React Native中沒有專門的按鈕元件。 為了能讓檢視能夠響應用的的點選事件，我們需要藉助Touchablexxx元件，來包裹我們的檢視。為什麼說是Touchablexxx呢，因為它 

  
 

    

    
    
React Native元件篇（四） — Touchable系列元件
     
 
                

Touchable元件是什麼
從字面上的意思我們就可以理解，Touchable是可觸控的控制元件，相當於我們iOS的簡單手勢。複雜的RN處理手勢還有專門的API如果你想實現檢視的拖拽，或是實現自定義的手勢，那麼請參閱PanResponder API或是手勢識別系統的文件。 

  
 

    

    
    
React Native之屬性類型檢查機制詳解 PropType 變成 prop-types
     
 word   man   div   color   object   platform   UC   靜態   ESS   屬性確認的作用
使用 React Native 創建的組件是可以復用的，所以我們開發的組件可能會給項目組其他同事使用。但別人可能對這個組件不熟悉，常常會忘記使用某些屬性，或者某些屬性傳 

  
 

    

    
    
React Native探索（四）Flexbox佈局詳解
     
 
							
							
							



前言

在Android開發中我們有很多種佈局，比如LinearLayout和RelativeLayout，同樣在React Native也有它的佈局，這個佈局就是Flexbox佈局。在CSS、React Native和Android等都有它的身影。這一 

  
 

    

    
    
React-Native學習--輪播圖第三方元件-react-native-swiper
     
  
 
 
 一.通過npm安裝react-native-swiper 
  
 $ npm install react-native-swiper --save
$ npm i react-timer-mixin --save 
  
  
 二.在專案中匯入 
  
 import Swiper from 

  
 

    

    
    
React-Native開發中的靈異元件-列表
     
 
                    
靈異元件
眾所周知，列表是移動開發中非常常用的元件（控制元件）。原生的列表，拿iOS來來說，有UITableView & UICollectionview,就算是長列表的情況也只是載入速度慢，不會出現突然不再載入的情況，Android的應該也是這種情況。但是 

  
 

    

    
    
關於React-native裡Android原生模組和元件的寫法
     
 
							
							
							原生模組就是把Android裡的API匯出來給JS呼叫,說簡單一點,就是讓自己寫的Java函式能夠在React Native的js程式碼裡呼叫。比如一些實現高效能的、多執行緒的程式碼，還有譬如圖片處理、資料庫、或者各種高階擴充套件等等。 
舉個栗子： 
Toas 

  
 

    

    
    
React Native開源圖片縮放處理元件
     
 


尊重版權,轉載請註明出處




專案介紹
該元件進行封裝了Android平臺PhotoView和Universal-image-loader元件，進行實現影象縮放等功能。不過只是適配Android平臺
剛建立的React Native技術交流3群(496508742)歡迎各位大牛,React Nati 

  
 

    

    
    
React Native入門（十三）之元件的生命週期
     
 
							
							
							前言

React Native中元件的生命週期，也就是React.js中Component的生命週期。 
英文官方文件：React.Component 
類比Android中activity和fragment，瞭解其生命週期對於我們掌握一個元件從建立到銷燬的整 

  
 

    

    
    
react native實現可展開Text控制元件
     
 
                
原理：元件初始化時不設定Text控制元件的numberOfLines屬性，測量一下元件高度（最大高度），然後在設定numberOfLines屬性，再次測量一下元件高度（最小高度），若最大高度大與最小高度，表示需要顯示“展開”。/* eslint new-cap: ["err 

  
 

    

    
    
Touchable系列元件
     
 
							
							
							



/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'reac 

  
 

    

    
    
react-native封裝原生下拉重新整理元件
     
 
								
								            
							
							
							之前改進過一個react-native-pull元件解決了iOS上重新整理頭部出現空白問題，並且將listview改成了flatlist。 
github如下： 
react-native-pullvi 

  
 

    

    
    
react-native---rn中的滑動檢視元件（ScrollView）
     
 
							
							
							ScrollView元件介紹與簡單使用




React Native中的 ScrollView 的元件除了包裝滾動平臺，還集成了觸控鎖定的 響應者 系統，使用的時候有幾點需要注意




//ScrollView 必須有一個確定的高度才能正常工作,對於 Sc 

  
 

    

    
    
[React Native]高度自增長的TextInput元件
     
 
							
							
							

在開發中,我們有時候有這樣的需求, 希望輸入區域的高度隨著輸入內容的長度而增長, 如下： 
 
這時候我們需要自定義一個元件： 
在專案中建立AutoExpandingTextInput.js

import React, {Component} from  

  
 

    

    
    
react-native自定義單選框元件
     
 
                
http://www.jianshu.com/p/285a99686606

下載：


npm i react-native-radio-master --save 


使用：


import RadioModal from 'react-native-radio-m 

  
 

    

    
    
React-Native通過登入介面學習TextInput元件
     
 
							
							
							同時適配Android和IOS



程式碼註釋比較詳細

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React 

  
 

    

    
    
react native 語法ECMAScript 6 學習筆記----變數的解構賦值
     
 

預設值 

解構賦值允許指定預設值。
var [foo = true] = [];
foo // true

[x, y = 'b'] = ['a']; // x='a', y='b'
[x, y = 'b'] = ['a', undefined]; // x='a', y='b'

物件的解構賦值

解 

  
 

    

    
    
【REACT NATIVE 系列教程之一】觸控事件的兩種形式與四種TOUCHABLE元件詳解
     
 本文是RN（React Native）系列教程第一篇，當然也要給自己的群做個廣告：  React Native @Himi ：126100395  剛建立的群，歡迎一起學習、討論、進步。本文主要講解兩點：1.   PanResponder：觸控事件，用以獲取使用者手指所在螢幕的座標（x,y）或觸發、或滑動、或 

  
 

    

    
    
【REACT NATIVE 系列教程之四】重新整理元件RENDER(重新渲染)的三種方式詳解
     
 開發過遊戲的都應該很清楚，“刷屏”是多麼的重要。其實開發應用也如此，當元件的資料被修改後，如何及時更新元件呈現出最新的資料與效果一樣至關重要。那麼這裡Himi大概講三種常用的方式：this.setState()  【最為常用】這是在事件處理函式中和請求回撥函式中觸發 UI 更新的主要方法。一般情況下setSt 

  
 

    

    
    
美團React Native基礎元件庫beeshell詳解
     
 
							
							
							近年來，伴隨著大前端概念的提出和興起，移動端和前端的邊界變得越來越模糊，湧現了一大批移動跨平臺開發框架和模式。從早期的PhoneGap、inoc等Hybird技術，到現在耳熟能詳的React Native、Weex和Flutter等技術，無不體現著移動端開發的前