React Native自定義組件的兩種方式

自定義組件的兩種方式。

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

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

*可以通過(guò)this.props訪問(wèn)屬性。

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 = '請(qǐng)繼續(xù)'
        }
        else
        {
          zeroTitle = '已完成'
          zeroDescription = '請(qǐng)等待'
          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í)，通過(guò)props屬性傳值。

<ProgressComponent index={1}/>

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

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

寫法一:(直接導(dǎo)入，根據(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 = '請(qǐng)繼續(xù)'
        }
        else
        {
          zeroTitle = '已完成'
          zeroDescription = '請(qǐng)等待'
          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 = '請(qǐng)繼續(xù)'
        }
        else
        {
          zeroTitle = '已完成'
          zeroDescription = '請(qǐng)等待'
          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;

寫法三:(和寫法二導(dǎo)出方式不同)

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 = '請(qǐng)繼續(xù)'
        }
        else
        {
          zeroTitle = '已完成'
          zeroDescription = '請(qǐng)等待'
          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;
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容