自定義組件的兩種方式百炬。

一褐隆、ES6形式的export default class XXXComponent extends Component定義的組件。

*有自己的生命周期函數(shù)剖踊；

*可以通過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 = '請繼續(xù)'
        }
        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}/>

二虫埂、函數(shù)式定義的無狀態(tài)組件(介紹三種寫法)

• 組件不能訪問this對象
• 組件無法訪問生命周期方法
• 無狀態(tài)組件只能訪問輸入的props，同樣的props會得到同樣的渲染結(jié)果圃验，不會有副作用

寫法一:(直接導入掉伏，根據(jù)文件名引用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 = '請繼續(xù)'
        }
        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',
      }
})
};

寫法二：(更加函數(shù)化)

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 = '請繼續(xù)'
        }
        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 = '請繼續(xù)'
        }
        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;