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

                                                React Native基礎:10-Button組件

                                                Button組件簡介

                                                Button組件是一個簡單的跨平臺的按鈕組件。Button組件可以被點擊,點擊之后可以觸發執行特定的動作,并且會有一個漸變的效果反饋給用戶。官方提供的Button組件可以有如下一些樣式,Button組件的樣式在iOS客戶端以及Android客戶端的顯示會有差異。

                                                如果官方提供的Button組件外觀并不符合所需的設計要求,可以使用TouchableOpacity或是TouchableNativeFeedback組件來制作自定義的按鈕,或者也可以在github.com網站上搜索'react native button'來看看社區其他人的作品。

                                                在React Native中,我們可以使用如下的方式創建一個簡單的Button組件。

                                                <Button
                                                  title="99iOS"
                                                  color="red"
                                                />
                                                

                                                Button組件的屬性

                                                Button組件中定義了如下幾個常用的屬性和函數,用于定制Button組件的樣式以及行為。

                                                • title,按鈕內顯示的文本;

                                                • color,在iOS中,用于設置按鈕文本的顏色,在Android中,用于設置按鈕的背景色;

                                                • onPress,用戶點擊按鈕時所調用的處理函數,也就是說,處理按鈕的點擊事件只需要給Button組件的onPress屬性賦值就可以了。例如,下面的代碼中,當點擊按鈕會調用onButtonPress()函數,顯示一個提示框。

                                                onButtonPress() {
                                                    Alert.alert('按鈕被點擊');
                                                  }
                                                
                                                <Button
                                                  onPress={this.onButtonPress}
                                                  title="99iOS"
                                                  color="red"
                                                />
                                                
                                                • disabled,設置按鈕是否可以被點擊,當設置為true時按鈕將不能夠被點擊。如下代碼中,按鈕將不能夠被點擊。
                                                <Button 
                                                onPress={this.onButtonPress} 
                                                title="不能點擊的按鈕" 
                                                color="red" 
                                                disabled={true}/>
                                                

                                                示例代碼

                                                下方的示例代碼中,演示了如何使用Button組件,包括Button組件的創建、樣式定制以及點擊方法的設置等功能。

                                                • 在終端中執行如下命令,創建ButtonDemo工程;
                                                react-native init ButtonDemo
                                                
                                                • 使用Atom打開工程的index.ios.js文件,編寫組件所使用的樣式
                                                const styles = StyleSheet.create({
                                                  container: {
                                                    flex: 1,
                                                    flexDirection: 'column',
                                                    justifyContent: 'center',
                                                    alignItems: 'center',
                                                    backgroundColor: '#F5FCFF',
                                                  },
                                                });
                                                
                                                • 在一個View組件中,添加三個Button組件,對Button組件的樣式以及點擊行為進行設置。
                                                export default class ButtonDemo extends Component {
                                                  //Button組件點擊后執行的函數
                                                  onButtonPress() {
                                                    Alert.alert('按鈕被點擊');
                                                  }
                                                  //添加三個Button組件
                                                  render() {
                                                    return (
                                                      <View style={styles.container}>
                                                        <Button title="99iOS" color="blue"/>
                                                        <Button onPress={this.onButtonPress} title=" 可以點擊" color="red"/>
                                                        <Button onPress={this.onButtonPress} title=" 不可以點擊 " color="red" disabled={true}/>
                                                      </View>
                                                    );
                                                  }
                                                }
                                                
                                                • 使用import加載項目所使用的模塊,并且注冊組件ButtonDemo成為整個應用的根容器。
                                                import React, { Component } from 'react';
                                                import {
                                                  AppRegistry,
                                                  StyleSheet,
                                                  Button,
                                                  View,
                                                  Alert,
                                                } from 'react-native';
                                                
                                                AppRegistry.registerComponent('ButtonDemo', () => ButtonDemo);
                                                
                                                • 在終端中執行下面的命令運行程序,在iOS模擬器中可以看到顯示的三個Button組件。
                                                react-native run-ios
                                                

                                                • 當點擊按鈕時,會調用onPress()函數,即調用iOS的提醒框控件給用戶展示提示信息。


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