使用下面的命令
$ 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上創了乙個賬號,又開通了部落格。也許我不是名人,也許幻想著成為名人。在這裡 我不會給任何人許諾,這個部落格可能有乙個博文 有兩個博文 或者會有很多 很多 很多。不過讓我有個大膽的猜想,如果這個部落格在今後有很多很多自己寫的博文,說明我成功了 在自己眼裡 也說明這個方法時正...