免費開源的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
                                                


                                                欧美超级精品一级A片|欧美一级黄色视频|国产精品自在在线午夜免费|4444亚洲人成无码网在线观看|亚洲ⅴa曰本va欧美va视频