React Native頁面跳轉之啟動界面（四）

學習知識：

1.?React-navigation之 createStackNavigator

2. Image組件

3.? this.props.navigation.replace

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

具體實現：創建兩個組件頁面，一個WelcomePage做為啟動頁面放一個歡迎圖片，一個IndexPage做為APP首頁或者登錄頁之類

效果圖：



目錄結構：


1.?創建項目 react-native init navigation

2.?修改App.js使其通過navigation變成一個系統的總組件。

3.?創建Images文件夾，放入需要使用的啟動圖片

4.?創建theme.js公共文件：


5.?啟動頁WelcomePage.js,?使用到Image組件，主要屬性source={require('../images/launch.jpg');? 在render完之后實現componentDidMount周期函數，進行延時跳轉 （只要配置了navigator的component都會自動有一個屬性，this.props.navigation）

6.?首頁


最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容