菜雞裝B失敗錦集-ReactNative 組件封裝

首先這個(gè)問題困擾了菜雞很長(zhǎng)時(shí)間,在 清清 和 覺醒 倆位的領(lǐng)導(dǎo)下,把這個(gè)問題給解決了,其實(shí)沒那么復(fù)雜。

1:需要導(dǎo)出的組件要加上export default,定義為可導(dǎo)出的。
export default class 組件名 extends React.Component
如下:

export default class Detail extends React.Component

2:需要導(dǎo)出的組件,寫上導(dǎo)出叫啥。
module.export = 導(dǎo)出名稱
如下:

 module.export = Detail;

導(dǎo)出組件的JS 如下:

'use strict';
import React, {PropTypes} from 'react';
import {
Text,
StyleSheet,
} from 'react-native';

const propTypes = {
onPress: PropTypes.func,
containerStyle: PropTypes.object,
text: PropTypes.string
};

export default class Detail extends React.Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <Text>測(cè)試引用</Text>
    );
}
}
module.export = Detail;

導(dǎo)出完了,咱們就得引用了。。。
3:引用你得告訴RN組件從哪里來(lái),我的朋友。
import 要導(dǎo)入組件名稱 from './導(dǎo)入組件的路徑' (這里的./ 叫同級(jí)目錄,最后面的組件名不要加后綴,RN能識(shí)別又不傻)
如:

import Detail from './Buttom/Detail';

4:最后就引用這個(gè)組件名標(biāo)簽進(jìn)去就好了。
如:

<View>
    <Detail />
</View>

然后就可以了,終于成功了,好羞澀呀。

最后編輯于
?著作權(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)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,656評(píng)論 19 139
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,219評(píng)論 25 708
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券,享受所有官網(wǎng)優(yōu)惠,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 3,726評(píng)論 2 27
  • 果樹村邊綠映枝, 依稀楊柳管別離。 頻舉酒, 兩相催, 此時(shí)不醉不須歸。
    李緩之閱讀 511評(píng)論 48 70
  • 周五早盤買入的寶泰隆,今天封死漲停板。獲利出局,2天14%收益,這一波超短線做的酸爽!嚴(yán)格按照自己的交易標(biāo)準(zhǔn),到了...
    7個(gè)漲停板閱讀 100評(píng)論 0 1

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