
一、標(biāo)簽不同
? ? 1.容器? ? div——View
? ? 2.圖片? ? img——Image
? ? 3.文字? ? 所有雙標(biāo)簽——Text
? ? 4.背景? ? background——ImageBackground
? ? 注意:
? ? 1.react native中所有的標(biāo)簽首字母必須大寫,而html標(biāo)簽標(biāo)準(zhǔn)都是小寫
? ? 2.react native中所有需要輸出的文字必須使用<Text></Text>包裹,而HTML里面的雙標(biāo)簽都可以包裹文字
3.HTML中的圖片:<img src=“a.jpg”/>,react native中的圖片必須指定寬高:<Image source={require(“a.png”)} style={{width:100,height:100}}/>
4.react native的style中不支持使用background來定義背景,如果想要用圖片做背景,必須使用<ImageBackground source={require("bg.png")}></ImageBackground>標(biāo)簽包裹,而html中的css中可以使用background:url("../images/bg.png")
5.
二、布局樣式不同
react native中不存在float,也不支持position:fixed,而是采用的flex布局,雖然react native支持position中的absolute和realative以及flex,都是和html中css有所不同:
1.react native中的absolute默認(rèn)相對于父級,就算父級沒有定位,而css中的absolute是向上尋找的相對點,如果父級沒有定位,一直往上找定位參考點
2.react native中的flex的flexDirection默認(rèn)值是:column而css中的默認(rèn)值是row
3.react native中的高度等于父級高度使用flex:1 ,而web的css中使用height:100%,react native中沒有百分比的概念
注意:react native支持的屬性參考屬性
三、結(jié)構(gòu)不同
html加載的時候是自上而下的阻塞式加載,而react native根據(jù)生命周期來渲染,跟寫的位置無關(guān),而且react native文件一切皆js,無論是結(jié)構(gòu)還是css還是JS邏輯,下面是react native的生命周期:
1.constructor:組件被創(chuàng)建之前初始化數(shù)據(jù)
2.componentWillMount組件已創(chuàng)建但是未被渲染,可以在這里面請求數(shù)據(jù)
3.render:組件渲染,組件結(jié)構(gòu)都寫在這里
4.componentDidMount:組件已渲染完,可以在這里請求數(shù)據(jù)并使用setState改變數(shù)據(jù)來觸發(fā)視圖自動更新
5.componentWillReceiveProps:如果組件收到新的屬性(props),就會調(diào)用此函數(shù),并使用setState改變數(shù)據(jù)來觸發(fā)視圖自動更新
6.shouldComponentUpdate當(dāng)組件接收到新的屬性和狀態(tài)改變的話,都會觸發(fā)調(diào)用 shouldComponentUpdate來判斷組件是否應(yīng)該更新
7.componentWillUpdate如果組件狀態(tài)或者屬性改變,并且上的 shouldComponentUpdate(...) 返回為 true,就會開始準(zhǔn)更新組件,并調(diào)用 componentWillUpdate()
8.componentDidUpdate調(diào)用了 render() 更新完成界面之后,會調(diào)用 componentDidUpdate() 來得到通知
9.componentWillUnmount當(dāng)組件要被從界面上移除的時候,就會調(diào)用此函數(shù),一般在這里取消定時器,remove監(jiān)聽事件
四、頁面跳轉(zhuǎn)不同
html中使用a標(biāo)簽或者window.location.href來跳轉(zhuǎn)頁面,react native的路由跳轉(zhuǎn)有多種方案,可以根據(jù)自身選擇,官方推薦react-navigation,還有react-native-router-flux,navigator等
五、js運(yùn)行環(huán)境不同
web中的js運(yùn)行在瀏覽器,最上級是window,而react native里沒有window的概念,組件化最上級是global,掛在global下面是跨組件的,例如global.a=1,那么在所有組件都能使用a,所以一般登錄成功后把token掛在global上面,在其他任何頁面請求數(shù)據(jù)的時候可以直接使用token,注銷登錄就清除token