移動(dòng)應(yīng)用上的用戶交互基本靠“摸”。當(dāng)然，“摸”也是有各種姿勢(shì)的：在一個(gè)按鈕上點(diǎn)擊，在一個(gè)列表上滑動(dòng)，或是在一個(gè)地圖上縮放。React Native提供了可以處理常見(jiàn)觸摸手勢(shì)（例如點(diǎn)擊或滑動(dòng)）的組件，以及可用于識(shí)別更復(fù)雜的手勢(shì)的完整的手勢(shì)響應(yīng)系統(tǒng)。

顯示一個(gè)簡(jiǎn)單的按鈕

Button是一個(gè)簡(jiǎn)單的跨平臺(tái)的按鈕組件。下面是一個(gè)最簡(jiǎn)單的示例：

<Button
  onPress={()=>{
      Alert.alert("你點(diǎn)擊了按鈕！");
}}
title="點(diǎn)我！"
/>

上面這段代碼會(huì)在iOS上渲染一個(gè)藍(lán)色的標(biāo)簽狀按鈕，在Android上則會(huì)渲染一個(gè)藍(lán)色圓角矩形帶白字的按鈕。點(diǎn)擊這個(gè)按鈕會(huì)調(diào)用”onPress“函數(shù)，具體作用就是顯示一個(gè)alert彈出框。你還可以指定”color“屬性來(lái)修改按鈕的顏色。

再試試下面這個(gè)使用Button的例子吧。你可以點(diǎn)擊”Tap to Play“來(lái)預(yù)覽真實(shí)效果。（下面會(huì)顯示一個(gè)嵌在網(wǎng)頁(yè)中的手機(jī)模擬器，國(guó)內(nèi)用戶可能打不開(kāi)這個(gè)網(wǎng)頁(yè)模擬器，或速度非常慢）。

import React, { Component } from 'react';
import { Alert, Button, StyleSheet, View } from 'react-native';

export default class ButtonBasics extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
            color="#841584"
          />
        </View>
        <View style={styles.alternativeLayoutButtonContainer}>
          <Button
            onPress={this._onPressButton}
            title="This looks great!"
          />
          <Button
            onPress={this._onPressButton}
            title="OK!"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
  },
  buttonContainer: {
    margin: 20
  },
  alternativeLayoutButtonContainer: {
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
})

運(yùn)行結(jié)果如圖

Touchable系列組件

這個(gè)組件的樣式是固定的，所以如果它的外觀并不怎么搭配你的設(shè)計(jì)，那就需要使用TouchableOpacity或是TouchableNativeFeedback組件來(lái)定制自己所需要的按鈕，你可以在github.com網(wǎng)站上搜索’react native button‘來(lái)看看社區(qū)其他人的作品。
具體使用哪種組件，取決于你希望給用戶什么樣的視覺(jué)反饋：

• 一般來(lái)說(shuō)，你可以使用TouchableHighlight來(lái)制作按鈕或者連接。注意此組件的背景會(huì)在用戶手指按下時(shí)變暗。
• 在Android上還可以使用TouchableNativeFeedback，它會(huì)在用戶手指按下時(shí)行程類似墨水漣漪的視覺(jué)效果。
• TouchableOpacity會(huì)在用戶手指按下時(shí)降低按鈕的透明度，而不會(huì)改變背景的顏色。
• 如果你想在處理點(diǎn)擊事件的同時(shí)不顯示任何視覺(jué)反饋，則需要使用TouchableWithoutFeedback。

某些場(chǎng)景中你可能需要檢測(cè)用戶是否進(jìn)行了長(zhǎng)按操作。可以在上面列出的人已組建中使用onLongPress屬性來(lái)實(shí)現(xiàn)。
我們來(lái)看一下示例：

import React, { Component } from 'react';
import { Alert, Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

export default class Touchables extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  _onLongPressButton() {
    Alert.alert('You long-pressed the button!')
  }


  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableHighlight</Text>
          </View>
        </TouchableHighlight>
        <TouchableOpacity onPress={this._onPressButton}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableOpacity</Text>
          </View>
        </TouchableOpacity>
        <TouchableNativeFeedback
            onPress={this._onPressButton}
            background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
          </View>
        </TouchableNativeFeedback>
        <TouchableWithoutFeedback
            onPress={this._onPressButton}
            >
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>Touchable with Long Press</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 60,
    alignItems: 'center'
  },
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
  }
})

運(yùn)行結(jié)果如圖

截圖看不出效果，點(diǎn)擊各個(gè)按鈕時(shí)會(huì)出現(xiàn)不同的點(diǎn)擊效果

另一個(gè)在移動(dòng)應(yīng)用中常見(jiàn)的手勢(shì)就是滑動(dòng)。用戶會(huì)在列表中上下滑動(dòng)，或是在視圖上左右滑動(dòng)。要處理這樣的手勢(shì)，下面一章學(xué)習(xí)的就是如何使用滾動(dòng)視圖。