? ? ? 由于平臺(tái)的差異性,真正意義上的一套代碼同時(shí)可以運(yùn)行在三端是不存在的榨婆。這里說(shuō)的三端融合是借助webpack打包工具來(lái)進(jìn)行web端代碼的打包,從而實(shí)現(xiàn)代碼可以運(yùn)行在三端。當(dāng)然如果想減少工作量桅咆,是可以借助其他的開(kāi)源工具的,比如阿里的react-web坞笙,但是它的star數(shù)不是很多岩饼,所以筆者并沒(méi)有針對(duì)阿里的react-web進(jìn)行實(shí)踐,下面來(lái)說(shuō)說(shuō)實(shí)現(xiàn)三端融合的兩種方式:
? ? 1.結(jié)合redux機(jī)制實(shí)現(xiàn)純結(jié)合react寫(xiě)法薛夜。源碼地址在這里籍茧。
? ? ?大體思路如下: 1.對(duì)于Android和IOS端采用React-Native本身的處理機(jī)制來(lái)進(jìn)行判斷 2.對(duì)于Web端,利用webpack打包功能將代碼打包 3.狀態(tài)管理用統(tǒng)一機(jī)制-redux進(jìn)行管理
運(yùn)行過(guò)程: npm isntall npm run web-dev // 打開(kāi)3001端口項(xiàng)目運(yùn)行在瀏覽器上?
? ? ? ? ? ? ? ? ? ?react-native run-android(run-ios) // 項(xiàng)目即可運(yùn)行在對(duì)應(yīng)手機(jī)平臺(tái)上
? ? 2.利用react-native-web(代替react-web)梯澜。源碼地址在這里寞冯。
? ? 這個(gè)demo的實(shí)現(xiàn)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單,只是大致提到了如何區(qū)分不同平臺(tái)的組件,它的優(yōu)勢(shì)在于部分的組件是三端可以共用的吮龄。
這兩個(gè)demo都沒(méi)有利用針對(duì)ios進(jìn)行處理俭茧。只是在針對(duì)web以及手機(jī)進(jìn)行了處理。
歡迎大家一起交流~