Navigator导航器，该组件控制不同场景之间的切换。
它通过路由对象来分辨不同的场景。
renderScene 方法，接收route、navigator参数，并据此渲染场景。
configureScene 属性
export default class SampleComponent extends React.Component {
render() {
let defaultName = 'FirstPageComponent';
let defaultComponent = FirstPageComponent;
return (
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return
// {...route.params} 这种语法，其实就是把 route.params里的所有key都作为 props 的一个属性传递下去，如：
}} />
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
exportdefaultclassSampleComponentextendsReact.Component{
render(){
letdefaultName='FirstPageComponent';
letdefaultComponent=FirstPageComponent;
return(
initialRoute={{name:defaultName,component:defaultComponent}}
configureScene={(route)=>{
returnNavigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route,navigator)=>{
letComponent=route.component;
return
// {...route.params} 这种语法，其实就是把 route.params里的所有key都作为 props 的一个属性传递下去，如：
}}/>
);
}
}
Navigator组件，需要设置3个属性：
initialRoute: 初始的路由对象，本例中，该对象包含 name 和 component属性
configureScene: 设置页面场景切换时的动画效果。
renderScene: 这是一个函数，接收的2个参数为 route 和 navigator。route参数实际上，就是initialRoute中设置的，而navigator参数接收的是一个 Navigator对象，它有 push、pop、jump等方法。renderScene函数返回的时候，navigator 会作为 props进行传递。
export default class FirstPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
id: 2
};
}
_pressButton() {
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
params: {
id: this.state.id
}
})
}
}
render() {
return (
点我跳转
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
exportdefaultclassFirstPageComponentextendsReact.Component{
constructor(props){
super(props);
this.state={
id:2
};
}
_pressButton(){
const{navigator}=this.props;
if(navigator){
navigator.push({
name:'SecondPageComponent',
component:SecondPageComponent,
params:{
id:this.state.id
}
})
}
}
render(){
return(
点我跳转
);
}
}
export default class SecondPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount(){
this.setState({
id: this.props.id
})
}
_pressButton() {
const { navigator } = this.props;
if(navigator) {
//入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面
navigator.pop();
}
}
render() {
return (
获得的参数id: { this.state.id }
点我跳回去
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
exportdefaultclassSecondPageComponentextendsReact.Component{
constructor(props){
super(props);
this.state={};
}
componentDidMount(){
this.setState({
id:this.props.id
})
}
_pressButton(){
const{navigator}=this.props;
if(navigator){
//入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面
navigator.pop();
}
}
render(){
return(
获得的参数id:{this.state.id}
点我跳回去
);
}
}
参数回传
以上例子，由于 navigator.pop() 不接收参数，它只是从路由栈里面踢出最后一个路由，因此，执行pop()后，虽然会切换到前一个路由的场景，但是，不能传递参数。此时，我们可以将上一个页面的示例或者回调方法，作为参数传递到下一个页面，那么，在当前页面就能够操作上一个页面的数据。
export default class FirstPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
id: 2,
user: null
};
}
_pressButton() {
let _this = this;
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
params: {
id: this.state.id,
getUser: function(user){
_this.setState({
id: 2,
user: user
})
}
}
})
}
}
render() {
if(this.state.user){
return (
用户信息：{ JSON.stringify(this.state.user) }
)
}
else{
return (
查询 ID 为：{ this.state.id }的用户信息
);
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
exportdefaultclassFirstPageComponentextendsReact.Component{
constructor(props){
super(props);
this.state={
id:2,
user:null
};
}
_pressButton(){
let_this=this;
const{navigator}=this.props;
if(navigator){
navigator.push({
name:'SecondPageComponent',
component:SecondPageComponent,
params:{
id:this.state.id,
getUser:function(user){
_this.setState({
id:2,
user:user
})
}
}
})
}
}
render(){
if(this.state.user){
return(
用户信息：{JSON.stringify(this.state.user)}
)
}
else{
return(
查询ID为：{this.state.id}的用户信息
);
}
}
}
const USERS = {
1: {name: 'Tom', age: 23},
2: {name: 'Jack', age: 29}
};
export default class SecondPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
id: null
};
}
componentDidMount(){
this.setState({
id: this.props.id
})
}
_pressButton() {
const { navigator, getUser } = this.props;
if(navigator) {
if(getUser){
getUser(USERS[this.props.id]);
}
//入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面
navigator.pop();
}
}
render() {
return (
获得的参数id: { this.state.id }
点我跳回去
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
constUSERS={
1:{name:'Tom',age:23},
2:{name:'Jack',age:29}
};
exportdefaultclassSecondPageComponentextendsReact.Component{
constructor(props){
super(props);
this.state={
id:null
};
}
componentDidMount(){
this.setState({
id:this.props.id
})
}
_pressButton(){
const{navigator,getUser}=this.props;
if(navigator){
if(getUser){
getUser(USERS[this.props.id]);
}
//入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面
navigator.pop();
}
}
render(){
return(
获得的参数id:{this.state.id}
点我跳回去
);
}
}
Navigator组件支持的跳转方法如下：
getCurrentRoutes() 获取栈里现有的路由
jumpBack()
jumpForward()
jumpTo(route)
push(route)
pop()
replace(route)
replaceAtIndex(route, index)
replacePrevious(route)
resetTo(route)
immediatelyResetRouteStack(routeStack)
popToRoute(route)
popToTop()
2068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
