React Native頁面跳轉(zhuǎn)之啟動(dòng)界面(四)

學(xué)習(xí)知識(shí):

1.?React-navigation之 createStackNavigator

2. Image組件

3.? this.props.navigation.replace

源代碼地址:?https://github.com/ysb002003/ReactNativeLearning_ReactNavigation

具體實(shí)現(xiàn):創(chuàng)建兩個(gè)組件頁面,一個(gè)WelcomePage做為啟動(dòng)頁面放一個(gè)歡迎圖片,一個(gè)IndexPage做為APP首頁或者登錄頁之類

效果圖:



目錄結(jié)構(gòu):


1.?創(chuàng)建項(xiàng)目 react-native init navigation

2.?修改App.js使其通過navigation變成一個(gè)系統(tǒng)的總組件。

3.?創(chuàng)建Images文件夾,放入需要使用的啟動(dòng)圖片

4.?創(chuàng)建theme.js公共文件:


5.?啟動(dòng)頁WelcomePage.js,?使用到Image組件,主要屬性source={require('../images/launch.jpg');? 在render完之后實(shí)現(xiàn)componentDidMount周期函數(shù),進(jìn)行延時(shí)跳轉(zhuǎn) (只要配置了navigator的component都會(huì)自動(dòng)有一個(gè)屬性,this.props.navigation)

6.?首頁


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容