React Native基礎使用

2021-08-22 13:05:22 字數 1509 閱讀 2774

一、元件的宣告(匯出)

export default class homeview extends react.component
二、元件的引入

import footer from './footer'
三、變數、常量和方法的匯出

//匯出乙個變數

export var name = 'nie';

//匯出乙個方法

export function add()

//匯出多個變數或常量

var name = 'nie';

const age = 18;

export ;

四、變數、常量和方法的引入

import  from './peoplecomponent';
五、props的使用

props可以從父元件傳遞過來,唯讀不可修改,但可以自定義未被定義的預設屬性。

const defaultprops=
對屬性進行型別檢查,支援array,bool,func,number,object,string等型別設定

const proptypes=
通過延展操作符傳遞props,簡化**

render();

return }

使用解構賦值傳遞部分props

render();

var = prarms;

return }

六、state的使用

初始化

//方式一,定義在建構函式中

constructor(props)

}//方式二,定義在建構函式外

state=

顯示

更改

this.setstate()
七、ref使用

//設定

//方式一

//方式二

this.reftest=reftest} />

//獲取

//方式一

this.refs.reftest;

//方式二

this.refs['reftest'];

八、的引入

靜態資源

網路資源

原生資源

本地檔案系統中的資源,如手機相簿中的

let imgurl = platform.os==='android' ? 'file:///'+this.state.result : this.state.result;

React Native 安裝使用

1 首先 執行 cmd r 輸入 powershell noprofile executionpolicy bypass command iex new object net.webclient downloadstring set path path allusersprofile chocola...

React Native引數使用

我們的在程式中使用各種函式方法就離不開傳入引數,那麼如何在react native中使用引數呢?下面先來看乙個例子 1 系統元件使用引數 import react,from react class image extends component return 這裡我們使用到了顯示的元件 image,...

react native簡單使用

index.js 匯入自己的元件頁面 import myhomepage from myhomepage.js 第二個引數,表示要把哪個頁面註冊為專案的首頁 myhomepage.js 在 rn 中只能使用 js 作為 元件的字尾名,不能使用 jsx import react,from react ...