React Native 第乙個示例

2021-09-30 12:27:19 字數 2883 閱讀 9892

使用下面的命令

$ npm install -g react-native

-cli

$ react-native init awesomeproject

生成乙個名為awesomeproject的專案,輸入
$ cd awesomeproject/

$ react-native run-android

可以讓專案工程執行起來。通過修改`index.android.js` 檔案可以改變顯示內容。 ### 顯示本地資料 在檔案開頭`var react = require(『react-native』);` 下面新增如下**
var mocked_movies_data = [

},];

這裡定義了乙個資料,包括標題、日期和縮圖位址。 下面把這些顯示出來 控制項宣告在
var  =react;
顯示用image,文字用text 頁面顯示邏輯在render函式裡
render: function() >

text>

text>

source=

}style=

/>

view>);}

`` 定義了顯示的布局,布局引數通過style來控制。
var styles = stylesheet.create(,

});

其中`flexdirection: 『row』` 可以控制橫向顯示,就像liearlayout的orientation=」horizental」。 布局引數應用到布局中
render: function() >

新增到檔案開頭`var react = require(『react-native』);` 下面, 初始化資料定義在getinitialstate中,我們會把網路請求的資料儲存在movies變數中
getinitialstate: function

() ;

},

`componentdidmount` 是乙個生命週期函式,會在控制項載入完畢後呼叫,我們在這裡去發起獲取資料請求
componentdidmount: function() ,

fetchdata: function() );

}).done

(); },

在網路資料返回之前顯示loading頁面,資料返回後再具體顯示,可以通過判斷movies的狀態來顯示具體的內容
render: function() 

當資料是重複多條時,我們需要用listview顯示。新增listview的宣告

var  =react;
新增布局引數

listview: ,
修改布局

render: function

() return (

this.state.datasource}

renderrow=

style=

/>

);},

datasource是listview的資料介面,在getinitialstate中初始化

getinitialstate: function

() ),

loaded: false,

};},

修改資料請求

fetchdata: function() );

}).done

(); },

最終的執行結果

第乙個react native工程,簡單點

推薦乙個學習react native的好 是將react native在github上面的文章翻譯過來的中文 挺適合乙個入門react native的人學習,學的時候最好選擇最新的學習,我選擇的是0.39版本。附上截圖 也沒啥好講的,自己也是剛學沒幾天,就當做個筆記吧。修改的是index.andro...

python第乙個程式設計 第乙個 Python 程式

簡述 安裝完 python 後,windows 中 開始選單或安裝目錄下就會有 idle 開發 python 程式的基本 ide 整合開發環境 幫助手冊 模組文件等。linux 中 只需要在命令列中輸入 python 命令即可啟動互動式程式設計。互動式程式設計 互動式程式設計不需要建立指令碼檔案,是...

第乙個部落格

我不知道為什麼 我在csdn上創了乙個賬號,又開通了部落格。也許我不是名人,也許幻想著成為名人。在這裡 我不會給任何人許諾,這個部落格可能有乙個博文 有兩個博文 或者會有很多 很多 很多。不過讓我有個大膽的猜想,如果這個部落格在今後有很多很多自己寫的博文,說明我成功了 在自己眼裡 也說明這個方法時正...