【React Native開發】React Native控件之組件封裝實例

(一)前言

今天我們一起來看一下WebView組件講解以及使用實例

剛創建的React Native技術交流1群( 282693535 ),React Native技術交流2群( 496601483 ),歡迎各位大牛,React Native技術愛好者加入交流!同時博客右側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!

做為客戶端開發來講，Button(按鈕組件)是最基本的，在React Native中也存在相關Touchable*系列的組件來實現點擊事件(詳細請點擊)。下面我們來進行稍微封裝一個Button組件,然后進行單獨使用，其實用法和之前的差不多。

(二)使用說明

我們創建渲染一個ModeCustomButton組件，里邊包含TouchableHightlight以及Text組件，然后返回，在其他地方可以進行使用。具體渲染代碼如下:

class MoreCustomButton extends React.Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#a5a5a5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}

(三)簡要實例

該具體封裝以及使用實例如下:

/**


Sample React Native App
https://github.com/非死book/react-native
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TouchableHighlight,
ToastAndroid,
} from 'react-native';

class MoreCustomButton extends React.Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#a5a5a5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}
class CustomButton extends Component {
  render() {
    return (
      <MoreCustomButton
          onPress={() => {
          ToastAndroid.show('你點擊了我了~好疼！', ToastAndroid.LONG)}}
          text="請點擊我~"
        />
    );
  }
}
const styles = StyleSheet.create({
  button: {
    margin:5,
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#cdcdcd',
  }
});
AppRegistry.registerComponent('CustomButton', () => CustomButton);</pre> 
 
具體運行結果截圖:

  
(四)最后總結
 今天我們主要看一下簡單封裝Button按鈕以及使用。大家有問題可以加一下群React Native技術交流1群( 282693535 ),React Native技術交流2群( 496601483 ).或者底下進行回復一下。 
 尊重原創，轉載請注明：From Sky丶清（ http://www.lcode.org/ ） 侵權必究！ 
關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)
  
關注我的微博，可以獲得更多精彩內容
  
 </div>