react native 自定义组件以及引用
react native 自定义组件以及引用
在react native 里最重要的一个概念就是组件化,一个完整的项目就是由一个又一个的组件搭配组合起来的,你可以引用GitHub上面的第三方组件,也可以自定义组件,现在先讲一下自定义组件的流程。
以我自己的例子为例:
我定义了一个连接网络失败后的页面,如下图
当然每个组件定义的时候都是写在一个单独的class里面,只需在定义是将此类到处即可,上代码:
import React,{PureComponent}from 'react' import { View, Text, Image, TouchableOpacity, SectionList, Dimensions } from 'react-native' import { BEGIN_TEST_CONNECT }from '../actions/HomePicturePageActions' import { REQUEST_DATA }from '../actions/DevicesPageActions' import Net from '../utility/NetIntercation'; import StateInfoGlobal from '../entity/StateInfoGlobal'; import NetIntercation from '../utility/NetIntercation' import styles from '../styles/component/FailedAndNoTaskStyle' import strings from '../entity/Strings' var {height,width} = Dimensions.get('window'); export default class ConnectFailed extends PureComponent{ constructor(props){ super(props); this.state={ refresh: false, isHScreen: false, } } handleLayout(){ height = Dimensions.get('window').height; width = Dimensions.get('window').width; this.setState({ isHScreen: width > height, }); } render(){ return( <View style={styles.container} onLayout={()=>{this.handleLayout()}}> <View style={this.state.isHScreen ? {} : {marginTop: 25}}> <SectionList sections={[]} refreshing={this.state.refresh} onRefresh={()=>{}} ListHeaderComponent={()=><View style={{height: 100}} />} /> </View> <Text style={styles.maintext} allowFontScaling={false}>{strings.connect_fail}</Text> <TouchableOpacity style={styles.pic} onPress={()=>{ this.setState({ refresh: true, }); //点击重连前先检测是否拥有SD卡1,如果有加载sd1卡的URI,如果没有加载sd2卡的URI Net.requestGetJSONDataFetch(NetIntercation.URL_GETBASEMSG) .then((data)=>{ //链接成功得到对应的数据 if(!data.storages[0].equipped){ StateInfoGlobal.switchSdCardUri = NetIntercation.URL_GETPHOTOS + '?storage=sd2'; StateInfoGlobal.loadSdCard2 = true; this.props.dispatch(BEGIN_TEST_CONNECT(StateInfoGlobal.switchSdCardUri,this.props.dispatch)); }else{ this.props.dispatch(BEGIN_TEST_CONNECT(StateInfoGlobal.switchSdCardUri,this.props.dispatch)); } }).catch((e)=>{ }); this.props.dispatch(REQUEST_DATA(NetIntercation.URL_GETBASEMSG,this.props.dispatch)); }} > <Text style={styles.button}>{strings.Reload}</Text> </TouchableOpacity> </View> ); } }
export default class ConnectFailed extends PureComponent
这句里的 export default 就把这个组件导出了,在其他页面就可以用下面代码引用这个组件了,上代码:
import ConnectFailed from '../component/ConnectFailed';
上面代码里的文件路径按照自己项目里的路径
还有引用了自定义的组件后的用法,不多说,直接上代码:
actionState(status){ let {data} = this.props; //如果需要添加action一定要在外面的数组当中加入否则不会生效 switch(status) { case 'CONNECTING' : { return <ShamNavigator title={strings.HomePictureTabName} homePictureNet={"failed"} page={"HomePicture"}/> } case 'CONNECT_FAIL' : { return ( <View style={{flex: 1}}> <View style={{justifyContent: 'center', alignItems: 'center'}}> <ConnectFailed/> </View> </View> ); } }
由于项目里引用了redux,根据请求到网络的状态显示不同的页面,由代码里可以看出,请求失败时会跳转进入ConnectedFailed页面,即
<ConnectFailed/>这就是定义自定义组件以及引用自定义组价的方法