- 功能摘要
- 左右按鈕的跳轉方法
- 方法 一
- 在 indexiosjs 檔案中
- 方法 二
- 在 indexiosjs 檔案中
- 方法三 淘汰
- 在js檔案
- 資料
功能摘要 :
1. 左右按鈕的跳轉方法:
要導入外部頁面:
import Login from ‘./TestClass/Login’;
//在導航控件中 添加 ref 屬性指定控制器
<NavigatorIOS
ref='nav'
initialRoute={{
// 設定初始路由下面的初始闆塊
component:DXHome,
title:'網易新聞',
leftButtonIcon:{uri:'navigationbar_friendattention_highlighted'},
onLeftButtonPress:()=>this._clickNavLeftBtn(),
rightButtonTitle:"登入",
onRightButtonPress:()=>this._clickNavRightBtn(),
}}
style={{flex:1}}
tintColor="rgba(255, 130, 1, 1.0)"
/>
/**
* 點選了右邊的按鈕
*/
_clickNavRightBtn(){
// alert('點右邊');
this.refs.nav.push({
title:'登入',
component:Login //點選導航右側的按鈕跳轉到的頁面
})
}
在0.44版本之前和之後的方法是不同的,有時候回出現以下問題:是以有可能是0.44版本後不支援淘汰的方法,需要更換中實作方法‘Navigator is deprecated and has been removed from this package. It can now be installed ’ +
‘and imported from
instead ofreact-native-deprecated-custom-components
react-native
. ’ +
‘Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html’
方法 一 :
1. 在 index.ios.js 檔案中
/**
* Created by Liu on 2017/6/20.
*/
import React from 'react';
import {
AppRegistry,
Text,
Button,
View,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { TabNavigator } from "react-navigation";
var MoveList = require("./movieListView"); //也可以引入一個頁面使用
class ChatScreen extends React.Component {
// Nav options can be defined as a function of the screen's props:
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
// The screen's current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
class AllContactsScreen extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>List of all contacts</Text>
<Button
//跳轉
onPress={() => navigate('Chat', {user: 'Jane'})} //Passing params
title="Chat with Jane"
/>
</View>
);
}
}
AllContactsScreen.navigationOptions = {
title: 'My Chats',
};
const SimpleAppReactNavigation = StackNavigator({
Home: { screen: AllContactsScreen }, //第一棧
Chat: { screen: ChatScreen }, //第二棧
});
AppRegistry.registerComponent('HelloReactNative', () => SimpleAppReactNavigation);
方法 二 :
帶TabNavigator(分段選擇)
1. 在 index.ios.js 檔案中
/**
* Created by Liu on 2017/6/20.
*/
import React from 'react';
import {
AppRegistry,
Text,
Button,
View,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { TabNavigator } from "react-navigation";
var MoveList = require("./movieListView"); //也可以引入一個頁面使用
class ChatScreen extends React.Component {
// Nav options can be defined as a function of the screen's props:
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
// The screen's current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
class RecentChatsScreen extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>List of recent chats</Text>
<Button
onPress={() => navigate('Chat', {user: 'Lucy'})} //Passing params
title="Chat with Lucy"
/>
</View>
);
}
}
class AllContactsScreen extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>List of all contacts</Text>
<Button
//跳轉
onPress={() => navigate('Chat', {user: 'Jane'})} //Passing params
title="Chat with Jane"
/>
</View>
);
}
}
const MainScreenNavigator = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
MainScreenNavigator.navigationOptions = {
title: 'My Chats',
};
const SimpleAppReactNavigation = StackNavigator({
Home: { screen: MainScreenNavigator }, //第一棧
Chat: { screen: ChatScreen }, //第二棧
});
AppRegistry.registerComponent('HelloReactNative', () => SimpleAppReactNavigation);
方法三 : (淘汰)
這是0.44版本前的方法,現在官方已經摒棄這種方法了,是以出不了效果
1.在.js檔案
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity
} from 'react-native';
/*
* 導航器通過路由對象(route)來分辨不同的場景.每個路由對象都對應一個頁面元件,開發者設定什麼,導航器顯示什麼,是以導航器中重要的一個對象.
*
* 三步操作實作導航功能:
* 1.設定路由對象(告訴導航器我要顯示哪個頁面)
* 建立路由對象,對象的内容自定義,但是必須包含該場景需要展示的頁面元件.
* 2.場景渲染配置(告訴導航器我要什麼樣的頁面跳轉效果)
* 3.渲染場景(告訴導航器如何渲染頁面)
* 利用第一步設定的路由對象進行渲染場景
*
*
* */
//定義第一個頁面
//FirstPage 一個 button, 點選進入下一級頁面
var FirstPage = React.createClass({
//按鈕 onPress 事件處理方法
pressPush: function () {
//推出下一級頁面
var nextRoute ={
component: SecondPage
};
this.props.navigator.push(nextRoute);
},
render: function () {
return(
<View style={[styles.flex,{backgroundColor:"yellow"}]}>
<TouchableOpacity onPress ={this.pressPush}>
<Text>點選推出下一級頁面</Text>
</TouchableOpacity>
</View>
);
}
});
//定義第二個頁面
//SecondPage 一個 button, 點選傳回上一級頁面
var SecondPage = React.createClass({
pressPop:function () {
//傳回上一級
this.props.navigator.pop();
},
render:function () {
return(
<View style={[styles.flex,{backgroundColor:"cyan"}]}>
<TouchableOpacity
style={styles.btn}
onPress={this.pressPop}
>
<Text>點我傳回上一級</Text>
</TouchableOpacity>
</View>
);
}
});
var MyNavigatorTest = React.createClass({
render: function () {
var rootRoute ={
component: FirstPage
};
return(
<Navigator
/*
* 第一步:
* initialRoute
*
* 這個指定了預設的頁面,也就是啟動 app 之後看到的界面的第一屏
* 對象的屬性是自定義的,這個對象中的内容會在 renderScene 方法中處理
*
* 備注:必須包含的屬性,既 component, 表示需要渲染的頁面元件
*
* */
initialRoute={rootRoute}
/**
*
* 第二步:
*
* configureScene
*
* 場景渲染的配置
*/
configureScene={(route) => {
return Navigator.SceneConfigs.PushFromRight;
}}
/*
* 第三步:
* renderScene
*
* 渲染場景
*
* 參數: route(第一步建立并設定給導航器的路由對象),navigator(導航器對象)
* 實作: 給需要顯示的元件設定屬性
*/
renderScene={(route, navigator) => {
//從 route對象中擷取頁面元件
var Component = route.component;
return(
<Component
navigator={navigator}
route={route}
/>
);
}}
/>
);
}
});
var styles = StyleSheet.create({
flex:{
flex:,
justifyContent:"center",
alignItems:"center"
},
btn:{
width:,
height:,
borderColor:"#0089FF",
borderWidth:,
borderRadius:,
justifyContent:"center",
alignItems:"center"
},
});
module.exports = MyNavigatorTest;
資料:
React Native未來導航者：react-navigation 使用詳解