優聯實達_學習 React Native 17_React Native

學習 React Native 17

開發觸摸以及手勢系統

程序員心理都明白，基于網頁開發的接口一般都是利用鼠標進行控制的。我們使用象 Hover這一類的標簽狀態來展示交互行為以及回應用戶的響應。對于移動設備來說，最主要的就是使用觸碰事件。移動平臺有自己的交互行為的規范，您只需根據該規范進行設計就好了。不同的平臺會有著各種不一樣的表現行式： iOS 的互動行為和 Android 就完全不同，他們又都和 Windows Phone完全不一樣。

React Native 提供了大量的API 幫助您開發觸碰控制界面。在這一章節里，我們主要來看看 <TouchableHighlight> 容器組件，同時也了解一下由 PanResponder 提供的底層的 APIs 以及手勢響應系統。

使用 TouchableHighlight:

任何去響應用戶觸摸的接口元素（考慮一下按鈕，控制元件等等吧），都應該被 <TouchableHightlight> 標簽包住。 TouchableHighlight 會在該元件被觸碰的時候在視圖上產生一個覆蓋層，以給用戶視覺上的反饋。這是一個最主要的交互行為讓這移動應用的頁面感覺更象原生一般，而對于那些使用了網頁直接生成的移動端的頁面，則觸摸后的反饋行為是非常有限的。做為這個讓人翹大拇指的規則，你應該在頁面所有使用了按鈕或是鏈接的地方使用 <TouchableHighlight />.

對于該標簽的最基礎的應用，您只需要把組件包括在 <TouchableHighlight> 標簽中即可，當該組件被按壓時，就會增添了一個很簡單的覆蓋層。對于象 onPressIn, onPressOut, onLongPress等事件，<TouchableHighlight>組件也能給您提供一個事件勾子。比方說，您可以使用該特性開發一個只有在長按的情況下才會出現的菜單，等等吧。

以下代碼是一個簡單的示例，告訴你如何把組件包括在 <TouchableHighlight> 中以便于得到用戶的反饋：

<TouchableHighlight onPressIn={this._onPressIn} onPressOut={this._onPressOut} style={styles.touchable}>
        <View style={styles.button}>
          <Text style={styles.welcome}>
{this.state.pressing ? 'EEK!' : 'PUSH ME'} </Text>
        </View>
    </TouchableHighlight>

當用戶點擊了該按鈕，就會出現一個覆蓋層，上面的文字也會發生了變化。

這不是一個非常貼切的示例，但他能夠展示了這基本的交互行為可以使得按鈕的觸碰感覺很象在 iOS系統中的原生程序。覆蓋層是很重要的回饋信息告訴用戶該元件是被點按了。要特別注意的是為了顯示這個覆蓋已土又立，我們并不需要為樣式表提供任何邏輯；<TouchableHighlight> 自己就幫我們把這些邏輯都處理好了。

下面是完整的按鈕組件的代碼：

'use strict';
var React = require('react-native'); var { 
      AppRegistry,
      StyleSheet,
      Text,
      View,
      TouchableHighlight
} = React; 
var Button = React.createClass({ getInitialState: function() { 
return {pressing: false}; }, 
_onPressIn: function() { this.setState({pressing: true}); 
},?_onPressOut: function() { 
this.setState({pressing: false}); }, 
render: function() { return ( 
<View style={styles.container}> <TouchableHighlight onPressIn={this._onPressIn} 
onPressOut={this._onPressOut} 
                            style={styles.touchable}>
          <View style={styles.button}>
<Text style={styles.welcome}> {this.state.pressing ? 'EEK!' : 'PUSH ME'} 
            </Text>
          </View>
        </TouchableHighlight>
      </View>
); } 
}); 
// Styles 
var styles = StyleSheet.create({ container: { 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
}, welcome: { 
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#FFFFFF'
  },
  touchable: {
    borderRadius: 100
  },
  button: {
    backgroundColor: '#FF0000',
    borderRadius: 100,
    height: 200,
    width: 200,
    justifyContent: 'center'
}, });
    module.exports = Button;

試著修改這段按鈕的代碼看看該按鈕是如何響應其他不同的事件，也試著用一用象onPress 或者是 onLongPress 這一類事件。當然了最好的感知這些事件是如何被響應，以及如何被處理的，最好的方式就是使用真實的設備。

手勢響應系統

如果您需要處理的不僅僅就是點按方式，那應該怎么辦？ React Native 也提供了另外兩個API以協助您定制開發觸碰事件： GestureResponder 和 PanResponder。 GestureResponder是一個低層的 API, 為 PanResponder提供了一個很有用的類抽象。我們先開始研究一下 GestureResponder 系統工作方式，因為他是 PanResponder’s API的基礎。

移動設備的觸碰相對來說是很復雜的。大部分的移動平臺是支持多點觸碰的，那則意味著同時可以在觸摸屏上會有多個觸控點被激發。（當然這些觸碰也不會完全都是手指的事件了，例如，用戶使用手掌支撐在屏幕的下角）另外，這里還有一個問題就是哪些視圖中是需要處理觸碰的。這個問題和在網頁上處理鼠標事件是一樣的，默認的處理方式也基本上一樣：最頂端的子句柄會默認得到觸碰事件。在React Naitve’s的手勢響應系統里，我們如果想使用這種試就可以直接調用該接口。

不深思則不能造于道。不深思而得者，其得易失。
名人名言- 曾國藩

By 優聯實達
2016-01-12
11865
公司新聞，網站開發，網站設計，UI

學習 React Native 17

開發觸摸以及手勢系統

下面是完整的按鈕組件的代碼：

手勢響應系統

新聞分類

關于我們

聯系方式

友情鏈接