react-native--Navigator

'use strict';
import React, {
AppRegistry,
Component,
Navigator,
} from 'react-native';

import SplashScreen from './splash.js'

class AwesomeProject extends Component {
render() {
let defaultName = 'Splash';
let defaultComponent = SplashScreen;
return (
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
} }
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
} }
/>
);
}
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

//代码分析：

initialRoute–定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项！

initialRoute={{ name: defaultName, component: defaultComponent }} 这个指定了默认的页面，也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。

configureScene

可选的函数，用来配置场景动画和手势。会带有两个参数调用，一个是当前的路由，一个是当前的路由栈。然后它应当返回一个场景配置对象！

(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

configureScene={(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
} }

renderScene function

必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。

(route, navigator) =>
<MySceneComponent title={route.title} navigator={navigator} />

renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}

…route.params—-数据传递来源

route传递的是component和name，navigator传递的Navigator对象，navigator作为props传递给component！

如果你得到了一个navigator对象的引用，则可以调用许多方法来进行导航：

● getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。

● jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。

● jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。

● jumpTo(route) - 跳转到已有的场景并且不卸载。

● push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去

● pop() - 跳转回去并且卸载掉当前场景

● replace(route) - 用一个新的路由替换掉当前场景

● replaceAtIndex(route, index) - 替换掉指定序列的路由场景

● replacePrevious(route) - 替换掉之前的场景

● immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈

● popToRoute(route) - pop到路由指定的场景，其他的场景将会卸载。

● popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。

//页面进行跳转
'use strict'
import React, {
Component,
TouchableOpacity,
View,
Text,
} from 'react-native'

import OnepageCompent from './index.one.js'

export default class SecondPageComponent extends Component {
constructor(props) {
super(props);
this.state = {};
}

_pressButton() {
const { navigator } = this.props;
if(navigator) {
//进入
navigator.push({
name: 'OnepageCompent',
component: OnepageCompent,
})
}
}

render() {
return(
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我</Text>
</TouchableOpacity>
</View>
);
}
}

'use strict'
import React, {
Component,
TouchableOpacity,
View,
Text,
} from 'react-native'

export default class OnepageCompent extends Component {
constructor(props) {
super(props);
this.state = {};
}

_pressButton() {
const { navigator } = this.props;
if(navigator) {
//跳转回去并且卸载掉当前场景<显示前一个页面>
navigator.pop();
}
}

render() {
return(
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}

这个语法是把 route.params 里的每个key 作为props的一个属性:

<其他参数也是作为KEY>

navigator.push({
name: 'OnepageCompent',
component: OnepageCompent,
})

这里的route，最基本的route就是:
var route = {
component: LoginComponent
}

参数传递：

constructor(props) {
super(props);
this.state = {
id:2
};
}

_pressButton() {
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'OnepageCompent',
component: OnepageCompent,
params:{
id:this.state.id
}
})
}
}

参数获取：

constructor(props) {
super(props);
this.state = {
id:null
};
}

componentDidMount(){
this.setState({
id: this.props.id
});
}

特殊需求：当然页面跳转到下一个页面，下一个页面处理玩数据，返回到前一个页面<当前页面>处理数据

<概念：上一个页面的实例或者回调方法，作为参数传递到当前页面来，在当前页面操作上一个页面的state>

'use strict'
import React, {
Component,
TouchableOpacity,
View,
Text,
ToastAndroid,
} from 'react-native'

import OnepageCompent from './index.one.js'

export default class SecondPageComponent extends Component {
constructor(props) {
super(props);
this.state = {
id:1,
user:null,
};
}

_pressButton() {
let _this = this;
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'OnepageCompent',
component: OnepageCompent,
params: {
id: this.state.id,
getUser: function(user) {
_this.setState({
user: user
})
}
}
});
}
}

render() {
if( this.state.user ) {
return(
<View>
<Text>用户信息: { JSON.stringify(this.state.user) }</Text>
</View>
);
}else {
return(
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>查询ID为{ this.state.id }的用户信息</Text>
</TouchableOpacity>
</View>
);
}
}
}

'use strict'
import React, {
Component,
TouchableOpacity,
View,
Text,
ToastAndroid,
} from 'react-native'

const USER_MODELS = {
1: { name: 'mot', age: 23 },
2: { name: '晴明大大', age: 25 }
};

export default class OnepageCompent extends Component {
constructor(props) {
super(props);
this.state = {
id: null
};
}

componentDidMount() {
this.setState({
id: this.props.id
});

}
_pressButton() {
const { navigator } = this.props;

if(this.props.getUser) {
let user = USER_MODELS[this.props.id];
this.props.getUser(user);
}
if(navigator) {
navigator.pop();
}
}

render() {
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this) }>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}