TouchableHighlight組件簡介

上一節我們介紹了Button組件——一個簡單的按鈕組件。Button組件僅僅支持有標題的按鈕，如果希望實現一個有圖片的按鈕或者是圖片文字組合的按鈕，就需要用到TouchableHighlight組件。

• 圖片按鈕。使用TouchableHighlight組件將Image組件包裹起來，就可以得到一個圖片按鈕。

<TouchableHighlight onPress={() => Alert.alert('按鈕被點擊')}>
  <Image
    source={require('./img/99ios.png')}
  />
</TouchableHighlight>

• 圖片文字組合按鈕。TouchableHighlight組件只能包含一個子組件，所以如果有多個子組件，那么我們需要使用View組件包裹一下。

<TouchableHighlight onPress={() => Alert.alert('按鈕被點擊')}>
 <View style={{flexDirection:'row', alignItems: 'center',}}>
  <Image
   source={require('./img/99ios.png')}
  />
  <Text>按鈕標題</Text>
 </View>
</TouchableHighlight>

示例代碼

下方的示例代碼中，我們創建了一個包含圖片以及文字的TouchableHighlight組件，當用戶點擊時，可以調用onPress()函數中定義的功能。

• 在終端中執行如下命令，創建TouchableHighlightDemo工程；

react-native init TouchableHighlightDemo

• 使用Atom打開TouchableHighlightDemo工程的index.ios.js文件，編寫組件所使用的樣式。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

• 創建一個TouchableHighlight組件，在其中添加一個View組件，并在View組件中包裹一個Image組件以及一個Text組件。

export default class TouchableHighlightDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={() => Alert.alert('按鈕被點擊')}>
         <View style={{flexDirection:'row', alignItems: 'center',}}>
          <Image
          style={{width: 50, height: 50, backgroundColor: 'skyblue'}}
          source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}
          />
          <Text>按鈕文字</Text>
         </View>
        </TouchableHighlight>
      </View>
    );
  }
}

• 使用import加載項目所使用的模塊，并且注冊組件TouchableHighlightDemo成為整個應用的根容器。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  Alert,
} from 'react-native';

AppRegistry.registerComponent('TouchableHighlightDemo', () => TouchableHighlightDemo);

• 在終端中執行下面的命令運行程序，在iOS模擬器中可以看到顯示的TouchableHighlight組件，但點擊該組件時，可以給用戶展示提示信息。

react-native run-ios

---