ReactNative頁(yè)面跳轉(zhuǎn)實(shí)例代碼
效果圖如下所示:
進(jìn)入工作目錄,運(yùn)行
react-native init NavigatorProject
創(chuàng)建項(xià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}} //初始化導(dǎo)航器Navigator,指定默認(rèn)的頁(yè)面 configureScene = { (route) => { return Navigator.SceneConfigs.FloatFromRight; //配置場(chǎng)景動(dòng)畫(huà),頁(yè)面之間跳轉(zhuǎn)時(shí)候的動(dòng)畫(huà) } } renderScene = { (route, navigator) =>{ let Component = route.component; return <Component{...route.params} navigator = {navigator} /> //渲染場(chǎng)景 } } /> ); } } //第一個(gè)頁(yè)面 class FirstPageComponent extends Component{ clickJump(){ const{navigator} = this.props; if(navigator){ navigator.push({ //navigator.push 傳入name和你想要跳的組件頁(yè)面 name: "SecondPageComponent", component: SecondPageComponent }); } } render(){ return( <View style = {styles.container}> <Text>我是第一個(gè)頁(yè)面</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>點(diǎn)擊進(jìn)入第二個(gè)頁(yè)面</Text> </TouchableHighlight> </View> ); } } //第二個(gè)頁(yè)面 class SecondPageComponent extends Component{ clickJump(){ const{navigator} = this.props; if(navigator){ navigator.pop(); //navigator.pop 使用當(dāng)前頁(yè)面出棧, 顯示上一個(gè)棧內(nèi)頁(yè)面. } } render(){ return( <View style = {styles.container}> <Text>我是第二個(gè)頁(yè)面</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>點(diǎn)擊返回第一個(gè)頁(yè)面</Text> </TouchableHighlight> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF', }, }); AppRegistry.registerComponent('navigatorProject', () => navigatorProject);
以上所述是小編給大家介紹的ReactNative頁(yè)面跳轉(zhuǎn)實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Reactnative-iOS回調(diào)Javascript的方法
- ReactNative實(shí)現(xiàn)Toast的示例
- ReactNative中使用Redux架構(gòu)總結(jié)
- ReactNative 之FlatList使用及踩坑封裝總結(jié)
- ReactNative Image組件使用詳解
- ReactNative踩坑之配置調(diào)試端口的解決方法
- ReactNative短信驗(yàn)證碼倒計(jì)時(shí)控件的實(shí)現(xiàn)代碼
- ReactNative之鍵盤Keyboard的彈出與消失示例
- ReactNative Alert詳解及實(shí)例代碼
- ReactNative-JS 調(diào)用原生方法實(shí)例代碼
- 使用Win10+Android+夜神安卓模擬器,搭建ReactNative開(kāi)發(fā)環(huán)境
相關(guān)文章
react-native中路由頁(yè)面的跳轉(zhuǎn)與傳參的實(shí)例詳解
這篇文章主要介紹了react-native中路由頁(yè)面的跳轉(zhuǎn)與傳參,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08React中Refs的使用場(chǎng)景及核心要點(diǎn)詳解
在使用?React?進(jìn)行開(kāi)發(fā)過(guò)程中,或多或少使用過(guò)?Refs?進(jìn)行?DOM?操作,這篇文章主要介紹了?Refs?功能和使用場(chǎng)景以及注意事項(xiàng),希望對(duì)大家有所幫助2023-07-07JavaScript React如何修改默認(rèn)端口號(hào)方法詳解
這篇文章主要介紹了JavaScript React如何修改默認(rèn)端口號(hào)方法詳解,文中通過(guò)步驟圖片解析介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07React Form組件的實(shí)現(xiàn)封裝雜談
這篇文章主要介紹了React Form組件的實(shí)現(xiàn)封裝雜談,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05使用React實(shí)現(xiàn)一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表的示例代碼
這篇文章我們將詳細(xì)講解如何建立一個(gè)這樣簡(jiǎn)單的列表,文章通過(guò)代碼示例介紹的非常詳細(xì),對(duì)我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08通過(guò)實(shí)例學(xué)習(xí)React中事件節(jié)流防抖
這篇文章主要介紹了通過(guò)實(shí)例學(xué)習(xí)React中事件節(jié)流防抖,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題
這篇文章主要介紹了React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12