自定义组件的两种方式。

一、ES6形式的export default class XXXComponent extends Component定义的组件。

*有自己的生命周期函数；

*可以通过this.props访问属性。

import React, {Component} from 'react'
import {
  View,
  Image,
  Text,
  StyleSheet
} from 'react-native'
export default class ProgressComponent extends Component {

  render() {
        const { index } = this.props
        let zeroImageName
        let zeroTitle
        let zeroDescription
        if(index === 0)
        {
           zeroImageName = require('../images/zero.png')
           zeroTitle = '未完成'
           zeroDescription = '请继续'
        }
        else
        {
          zeroTitle = '已完成'
          zeroDescription = '请等待'
          zeroImageName = require('../images/wait.png')
        }
        return (
          <View>
            <View style={styles.header}>
            <Image style={{ width: 60, height: 60}}
                source={zeroImageName}
              />
            </View>
            <View style={{ alignItems: 'center', marginTop:42}}>
            <Image style={{width:730,height:220}}
                   source={require('../images/apply.png')}
            />
            <View style={{position:'absolute',width:730,height:220}}>
            <View style={{flex:1,marginLeft:88}}>
            <View style={{flex:32}}/>
            <Text style={{fontSize:38,color:'#5588EE'}}>
             {zeroTitle}
              </Text>
              <View style={{flex:3}}/>
              <Text style={{fontSize:28,color:'#999999'}}> 
              {zeroDescription}
              </Text>
              <View style={{flex:32}}/>
              </View>
              </View>
            </View>
          </View>
        )
  }
}

const styles = StyleSheet.create({
    header: {
        height: 60,
        marginTop: 50,
        marginLeft: 40,
        marginRight: 40,
        alignItems: 'center',
        flexDirection: 'row',
      }
})

使用时，通过props属性传值。

<ProgressComponent index={1}/>

二、函数式定义的无状态组件(介绍三种写法)

• 组件不能访问this对象
• 组件无法访问生命周期方法
• 无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

写法一:(直接导入，根据文件名引用import ProgressView from '../components/ProgressComponent')

export default ({index}) => {
   index = ...
};

写法一例子

import React, {Component} from 'react'
import {
  View,
  Image,
  Text,
  StyleSheet
} from 'react-native'
export default ({index}) => {
        let zeroImageName
        let zeroTitle
        let zeroDescription
        if(index === 0)
        {
           zeroImageName = require('../images/zero.png')
           zeroTitle = '未完成'
           zeroDescription = '请继续'
        }
        else
        {
          zeroTitle = '已完成'
          zeroDescription = '请等待'
          zeroImageName = require('../images/wait.png')
        }
        return (
          <View>
            <View style={styles.header}>
            <Image style={{ width: 60, height: 60}}
                source={zeroImageName}
              />
            </View>
            <View style={{ alignItems: 'center', marginTop:42}}>
            <Image style={{width:730,height:220}}
                   source={require('../images/apply.png')}
            />
            <View style={{position:'absolute',width:730,height:220}}>
            <View style={{flex:1,marginLeft:88}}>
            <View style={{flex:32}}/>
            <Text style={{fontSize:38,color:'#5588EE'}}>
             {zeroTitle}
              </Text>
              <View style={{flex:3}}/>
              <Text style={{fontSize:28,color:'#999999'}}> 
              {zeroDescription}
              </Text>
              <View style={{flex:32}}/>
              </View>
              </View>
            </View>
          </View>
        )

const styles = StyleSheet.create({
    header: {
        height: 60,
        marginTop: 50,
        marginLeft: 40,
        marginRight: 40,
        alignItems: 'center',
        flexDirection: 'row',
      }
})
};

写法二：(更加函数化)

function ProgressComponent (props){
   props.index = ...
}
module.exports = ProgressComponent;

写法二例子

import React, {Component} from 'react'
import {
  View,
  Image,
  Text,
  StyleSheet
} from 'react-native'
function ProgressComponent (props){
        let zeroImageName
        let zeroTitle
        let zeroDescription
        if(props.index === 0)
        {
           zeroImageName = require('../images/zero.png')
           zeroTitle = '未完成'
           zeroDescription = '请继续'
        }
        else
        {
          zeroTitle = '已完成'
          zeroDescription = '请等待'
          zeroImageName = require('../images/wait.png')
        }
        return (
          <View>
            <View style={styles.header}>
            <Image style={{ width: 60, height: 60}}
                source={zeroImageName}
              />
            </View>
            <View style={{ alignItems: 'center', marginTop:42}}>
            <Image style={{width:730,height:220}}
                   source={require('../images/apply.png')}
            />
            <View style={{position:'absolute',width:730,height:220}}>
            <View style={{flex:1,marginLeft:88}}>
            <View style={{flex:32}}/>
            <Text style={{fontSize:38,color:'#5588EE'}}>
             {zeroTitle}
              </Text>
              <View style={{flex:3}}/>
              <Text style={{fontSize:28,color:'#999999'}}> 
              {zeroDescription}
              </Text>
              <View style={{flex:32}}/>
              </View>
              </View>
            </View>
          </View>
        )
}

const styles = StyleSheet.create({
    header: {
        height: 60,
        marginTop: 50,
        marginLeft: 40,
        marginRight: 40,
        alignItems: 'center',
        flexDirection: 'row',
      }
})
module.exports = ProgressComponent;

写法三:(和写法二导出方式不同)

const ProgressComponent = (props) =>{
    props.index = ...
}
export default ProgressComponent;

写法三例子

import React, {Component} from 'react'
import {
  View,
  Image,
  Text,
  StyleSheet
} from 'react-native'
const ProgressComponent = (props) => {
        let zeroImageName
        let zeroTitle
        let zeroDescription
        if(props.index === 0)
        {
           zeroImageName = require('../images/zero.png')
           zeroTitle = '未完成'
           zeroDescription = '请继续'
        }
        else
        {
          zeroTitle = '已完成'
          zeroDescription = '请等待'
          zeroImageName = require('../images/wait.png')
        }
        return (
          <View>
            <View style={styles.header}>
            <Image style={{ width: 60, height: 60}}
                source={zeroImageName}
              />
            </View>
            <View style={{ alignItems: 'center', marginTop:42}}>
            <Image style={{width:730,height:220}}
                   source={require('../images/apply.png')}
            />
            <View style={{position:'absolute',width:730,height:220}}>
            <View style={{flex:1,marginLeft:88}}>
            <View style={{flex:32}}/>
            <Text style={{fontSize:38,color:'#5588EE'}}>
             {zeroTitle}
              </Text>
              <View style={{flex:3}}/>
              <Text style={{fontSize:28,color:'#999999'}}> 
              {zeroDescription}
              </Text>
              <View style={{flex:32}}/>
              </View>
              </View>
            </View>
          </View>
        )
}
const styles = StyleSheet.create({
    header: {
        height: 60,
        marginTop: 50,
        marginLeft: 40,
        marginRight: 40,
        alignItems: 'center',
        flexDirection: 'row',
      }
})
export default ProgressComponent;