react native學習之路2專案的匯入與匯出

2021-08-08 16:56:09 字數 1822 閱讀 2328

這裡以android為例子(ios同理)

首先我們來看android的入口檔案index.android.js檔案

**如下:

/**

* * @flow

*/

import

react,

from

'react';

import

from

'react-native';

import

setupcomponent

from

'./js/setupcomponent'; //這裡是引入react 元件

registercomponent(

=>

setupcomponent);

2.然後我們來看看引入的這個setupcomponent這個js裡面的元件

**如下:

/**

* * @flow

*/

import

react,

from

'react';

import

from

'react-native';

import

elcomponent,

from

'./elcomponent';

//看到這裡我們又在當前js裡面匯入了elcomponent並匯入了name跟age兩個值過來

export

default

class

setupcomponent

extends

component

>

<

text

style=

>

名字:,年齡:

text

>

view

>

); }

}const

styles =

stylesheet.

create(,

welcome: ,

});registercomponent(

=>

3.同理我們看看

elcomponent

**如下:

/**

* * @flow

*/import

react,

from

'react';

import

from

'react-native';

//從這個頁面匯出資料

varname=

"張三";

varage=

18;export ;

//這個就是把name跟age變數匯出到下乙個頁面 給下乙個頁面使用

export

default

class

elcomponent

extends

component

>

<

text

style=

>

text

>

view

>

);}

}

const

styles =

stylesheet.

create(,

welcome: ,

});

registercomponent(

=>

4.我們看下專案的執行結果

React Native 爬坑之路

1.react 基礎 建立元件及在瀏覽器上渲染元件 2.設定元件樣式 3.復合元件 4.props 傳值 5.state管理 及 事件繫結 6.react 生命週期 7.index.android.js 詳解 flow 第一部分 匯入reactnative包,匯入reactnative元件 styl...

react native學習資源

這是我覺得比較有用的學習資源 要多練習多理解 一 1.react native 官方api文件 2.react native中文文件 3.react native通訊機制詳解 4.react native布局篇 5.react native基礎指南 一 6.react native基礎指南 二 7....

React Native學習 起步

時間 2015 04 11 10 32 49 w3ctech 原文 主題react 本指南匯集react native各類學習資源,給大家提供便利。指南正在不斷的更新,大家有好的資源歡迎pull requests!同時還有awesome react native系列 研究原始碼也是乙個很好的學習方式...