Navigator 跳转页面Arans11 MinutesJune 24, 2018

初始导航器 [ 理论 ]

return (
     <Navigator          
          //初始化组件
          initialRoute={{ name: defaultName, component: defaultComponent }}    
          //页面切换效果 
          configureScene={(route) => {
            return Navigator.SceneConfigs.VerticalDownSwipeJump; //定义了跳转方式
          }}
          renderScene={(route, navigator) => {
            let Component = route.component;
            return <Component {...route.params} navigator={navigator} />
          }} />
    )

initialRoute主要定义了首个加载项，

跳转方式

• Navigator.SceneConfigs.PushFromRight (默认) - Navigator.SceneConfigs.FloatFromRight - Navigator.SceneConfigs.FloatFromLeft - Navigator.SceneConfigs.FloatFromBottom - Navigator.SceneConfigs.FloatFromBottomAndroid - Navigator.SceneConfigs.FadeAndroid - Navigator.SceneConfigs.HorizontalSwipeJump - Navigator.SceneConfigs.HorizontalSwipeJumpFromRight - Navigator.SceneConfigs.VerticalUpSwipeJump - Navigator.SceneConfigs.VerticalDownSwipeJump

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

route里主要存储的就是我们传递的name,component

navigator是一个”Navigator对象” 主要为我们提供push pop jump… 多种方法

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到栈中的第一个场景，卸载掉所有的其他场景。

/**来自IOS的示例代码*/
class MyView extends Component {
  _handleBackPress() {
    this.props.navigator.pop();
  }

  _handleNextPress(nextRoute) {
    this.props.navigator.push(nextRoute);  //用push()方法把准备好的数据推到下一个页面
  }

  render() {
    const nextRoute = {					//此处创建了一个nextRoute对象用于存储将要传递的数据
      component: MyView,				//'component'定义了将要跳转的组件名
      title: 'Bar That',				//设置标题栏
      params:{ aran:"this is aran"}		 //准备了将要传递的数据
    };
    return(
      <TouchableHighlight onPress={() => this._handleNextPress(nextRoute)}>    //在此传递数据
        <Text style={{marginTop: 200, alignSelf: 'center'}}>
          See you on the other nav {this.props.myProp}!
        </Text>
      </TouchableHighlight>
    );
  }
}

---

初始导航器 [ 实践]

/**page1**/
jumpClick(){
        const{navigator} = this.props;
        /*that存储了上一个this*/
        if(navigator){
            /*push主要掌管页面跳转 返回的component属性决定了呈现哪一个class*/
            navigator.push({
                name : "SecondPageComponent",
                component : TheNextPage,
                params:{ aran:"this is aran"}
            })
        }
    }

render() {
    return(
    <TouchableHighlight onPress={this.jumpClick.bind(this)}>
        </TouchableHighlight>
    )
}

/**2**/
return(
            <View>
                <Text>
                    {this.props.aran}  
                </Text>
            </View>
        )

{this.props.aran} 接受上面传回的key

-