免費開源的iOS開發學習平臺

React Native基礎:11-TouchableHighlight組件

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


日韩av 中文字幕 1_亚洲第一区在线_亚洲V日韩V精品v无码专区_色鬼久久亚洲AV综合