react native 自定义组件以及引用

最新推荐文章于 2025-10-09 03:56:15 发布

原创最新推荐文章于 2025-10-09 03:56:15 发布 · 8.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react native

react native 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何在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>
            );
        }
    }