ES6語法

定義組件
在ES6里，我們通過定義一個繼承自React.Component的class來定義一個組件類，像這樣：

//ES6
1. class Photo extends React.Component {
2.     render() {
3.         return (
4.             <Image source={this.props.source} />
5.         );
6.     }
7. }

定義組件的屬性類型和默認(rèn)屬性

在ES6里，可以統(tǒng)一使用static成員來實現(xiàn)

//ES6
1. class Video extends React.Component {
2.     static defaultProps = {
3.         autoPlay: false,
4.         maxLoops: 10,
5.     };  // 注意這里有分號
6.     static propTypes = {
7.         autoPlay: React.PropTypes.bool.isRequired,
8.         maxLoops: React.PropTypes.number.isRequired,
9.         posterFrameSrc: React.PropTypes.string.isRequired,
1.         videoSrc: React.PropTypes.string.isRequired,
2.     };  // 注意這里有分號
3.     render() {
4.         return (
5.             <View />
6.         );
7.     } // 注意這里既沒有分號也沒有逗號
8. }

正文

首先

import React, { Component ,PropTypes} from 'react';

必須包含PropTypes，這是為了規(guī)范組件屬性的數(shù)據(jù)類型

import {
   Text,
   View,
   TouchableOpacity,
 } from 'react-native';

設(shè)置默認(rèn)屬性

1. static defaultProps = {
2.      defaultColor:'#f44e14',
3.      buttonName:'Button',
4.    }

設(shè)置對外接收的屬性，以及屬性的數(shù)據(jù)類型

1.  static propTypes = {
2.      setBackgroundColor : PropTypes.string,
3.      buttonName : PropTypes.string,
4.      block : PropTypes.func,
5.      setWidth : PropTypes.number,
6.      setHeight : PropTypes.number,
7.    }

上面的block屬性我設(shè)置的是一個func類型，也就是函數(shù)，在這里就是起一個回調(diào)作用。

1. render() {
2.      return(
3.        <TouchableOpacity onPress={()=>this.props.block()} >
4.          <View style={{
5.           flexDirection : 'row',
6.          justifyContent : 'center',
7.              alignItems : 'center',
8.         backgroundColor : (this.props.setBackgroundColor) ? this.props.setBackgroundColor : this.props.defaultColor,
9.                   width : (this.props.setWidth!==0) ? this.props.setWidth : 60 ,
1.                  height : (this.props.setHeight!==0) ? this.props.setHeight : 20,}}
2.          >
3.            <Text>{this.props.buttonName}</Text>
4.          </View>
5.        </TouchableOpacity>
6.      );
7.    }

外部使用

引入自定義組件文件

<TouchableOpacity onPress={()=>this.props.block()} >//執(zhí)行外部傳進來的函數(shù)

自定義組件完整代碼

1. import React, { Component ,PropTypes} from 'react';
2.  import {
3.    Text,
4.    View,
5.    TouchableOpacity,
6.  } from 'react-native';
7.  class DiscolorationButton extends React.Component{
8.    static defaultProps = {
9.      defaultColor:'#f44e14',
1.      buttonName:'Button',
2.    }
3.    static propTypes = {
4.      setBackgroundColor : PropTypes.string,
5.      buttonName : PropTypes.string,
6.      block : PropTypes.func,
7.      setWidth : PropTypes.number,
8.      setHeight : PropTypes.number,
9.    }
1.    render() {
2.      return(
3.        <TouchableOpacity onPress={()=>this.props.block()} >
4.          <View style={{
5.           flexDirection : 'row',
6.          justifyContent : 'center',
7.              alignItems : 'center',
8.         backgroundColor : (this.props.setBackgroundColor) ? this.props.setBackgroundColor : this.props.defaultColor,
9.                   width : (this.props.setWidth!==0) ? this.props.setWidth : 60 ,
1.                  height : (this.props.setHeight!==0) ? this.props.setHeight : 20,}}
2.          >
3.            <Text>{this.props.buttonName}</Text>
4.          </View>
5.        </TouchableOpacity>
6.      );
7.    }
8.  }
9. module.exports = DiscolorationButton;

<div align='center'>

效果圖

外部調(diào)用

1. import React, { Component } from 'react';
2. import {
3.   AppRegistry,
4.   StyleSheet,
5.   Text,
6.   View
7. } from 'react-native';
8. import DiscolorationButton from './DiscolorationButton.js'
9. export default class test extends Component {
1.   test(){
2.     alert('我是測試函數(shù)');
3.   }
4.   render() {
5.     return (
6.       <View style={styles.container}>
7.         <DiscolorationButton

8.         setBackgroundColor = '#bfb'
9.                 buttonName = '點我'
1.                   setWidth = {80}
2.                  setHeight = {40}
3.                      block = {()=>this.test()}
4.          />
5.       </View>
6.     );
7.   }
8. }

9. const styles = StyleSheet.create({
1.   container: {
2.     flex: 1,
3.     justifyContent: 'center',
4.     alignItems: 'center',
5.     backgroundColor: '#F5FCFF',
6.   },
7. });
8. AppRegistry.registerComponent('test', () => test);