ReactNative頁面跳轉實例代碼
更新時間:2016年09月27日 15:15:47 作者:嘆世殘者——華帥
這篇文章主要介紹了ReactNative頁面跳轉的代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
效果圖如下所示:
進入工作目錄,運行
react-native init NavigatorProject
創(chuàng)建項目NavigatorProject
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableHighlight, Image, Navigator } from 'react-native'; class navigatorProject extends Component{ render(){ let defaultName = 'firstPageName'; let defaultComponent = FirstPageComponent; return( <Navigator initialRoute = {{name: defaultName, component: defaultComponent}} //初始化導航器Navigator,指定默認的頁面 configureScene = { (route) => { return Navigator.SceneConfigs.FloatFromRight; //配置場景動畫,頁面之間跳轉時候的動畫 } } renderScene = { (route, navigator) =>{ let Component = route.component; return <Component{...route.params} navigator = {navigator} /> //渲染場景 } } /> ); } } //第一個頁面 class FirstPageComponent extends Component{ clickJump(){ const{navigator} = this.props; if(navigator){ navigator.push({ //navigator.push 傳入name和你想要跳的組件頁面 name: "SecondPageComponent", component: SecondPageComponent }); } } render(){ return( <View style = {styles.container}> <Text>我是第一個頁面</Text> <TouchableHighlight underlayColor = "rgb(180,135,250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 8, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)}> <Text>點擊進入第二個頁面</Text> </TouchableHighlight> </View> ); } } //第二個頁面 class SecondPageComponent extends Component{ clickJump(){ const{navigator} = this.props; if(navigator){ navigator.pop(); //navigator.pop 使用當前頁面出棧, 顯示上一個棧內頁面. } } render(){ return( <View style = {styles.container}> <Text>我是第二個頁面</Text> <TouchableHighlight underlayColor = "rgb(180, 135, 250)" activeOpacity = {0.5} style = {{ borderRadius: 8, padding: 8, marginTop: 5, backgroundColor: "#F30" }} onPress = {this.clickJump.bind(this)}> <Text>點擊返回第一個頁面</Text> </TouchableHighlight> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF', }, }); AppRegistry.registerComponent('navigatorProject', () => navigatorProject);
以上所述是小編給大家介紹的ReactNative頁面跳轉實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
您可能感興趣的文章:
- Reactnative-iOS回調Javascript的方法
- ReactNative實現(xiàn)Toast的示例
- ReactNative中使用Redux架構總結
- ReactNative 之FlatList使用及踩坑封裝總結
- ReactNative Image組件使用詳解
- ReactNative踩坑之配置調試端口的解決方法
- ReactNative短信驗證碼倒計時控件的實現(xiàn)代碼
- ReactNative之鍵盤Keyboard的彈出與消失示例
- ReactNative Alert詳解及實例代碼
- ReactNative-JS 調用原生方法實例代碼
- 使用Win10+Android+夜神安卓模擬器,搭建ReactNative開發(fā)環(huán)境
相關文章
使用React實現(xiàn)一個簡單的待辦事項列表的示例代碼
這篇文章我們將詳細講解如何建立一個這樣簡單的列表,文章通過代碼示例介紹的非常詳細,對我們的學習或工作有一定的幫助,需要的朋友可以參考下2023-08-08React項目配置axios和反向代理和process.env環(huán)境配置等問題
這篇文章主要介紹了React項目配置axios和反向代理和process.env環(huán)境配置等問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12