react native學習之入門app

2022-01-31 10:46:13 字數 833 閱讀 3899

1、專案初始化:

react-native init myproject

2、啟動專案:

cd myproject

react-native start

新開cmd視窗:

react-native run-android

3、源**分析:

附上index.android.js檔案:

/*

* */import react,

from

'react';

import

from

'react-native';

class

myproject extends component

}const styles =stylesheet.create(,

welcome: ,

instructions:

});'

myproject

', () => myproject);

首先import引入react|react-native的相關元件模組,這樣我們自定義元件的時候可以直接返回react自身的元素(react元件自定義時,必須實現render方法,並且返回乙個react element,而且有且僅有乙個被包含的頂層元素)

然後通過extends繼承component元件,實現render方法,返回乙個包含view布局,內嵌三個text控制項的react element,至於text元件的style定義,同react中一致,可以是乙個有效的以大括號括起來的js表示式或物件,如styles,最後通過

React Native學習筆記之2

1 如何建立乙個react native工程 首先進入到指定資料夾裡面,然後在終端執行react native init reactnativeproject 其中reactnativeproject為工程的名稱 2 如何運用除錯 可以先安裝chrome瀏覽器的外掛程式react developer...

React Native學習之 Image元件

為了使新的資源機制正常工作,require中的名字必須是乙個靜態字元創 不能使用變數!因為require是在編譯時期執行,而非執行時期執行!錯誤 var icon this.props.active my icon active my icon inactive 正確 var icon this.p...

react native學習資源

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