React-navigation导航系统(6)-Views

tags: React-Native

Views

Navigation 视图是接受router和navigaion 的prop的表征组件,通过navigation.state的设定,可以显示几个screens.
Navigation view是被控制的React组件,表征当前的navigation state.他们管理screen之间的切换,动画和手势.他们也持久化navigation view例如tab bars和headers

内建的Views

• CardStack-代表stack在任何平台上都匹配

  • 代表一个从Card stack来的card.
  • Header-card stack的header view

• Tabs-tab切换器/页面的配置

• Drawer-从左侧滑出的Drawer的view

Transitioner

transitioner是一个React 组件帮助管理复杂动画组件之间演变的工具.它管理动画的时间调度,保留各种screen的进入离开的记录,但是它不知道具体的事件是什么,应为具体的渲染过程委托给了开发者.
在内部,Transitioner被用来实施CardStack,因此是StackNavigator.
Transiioner最有用的用途是接受当前navigation的state.当routes从navigation state移除的时候,Transitioner

实例

 class MyNavView extends Component {  ...  render() {    return (      <Transitioner        configureTransition={this._configureTransition}        navigation={this.props.navigation}        render={this._render}        onTransitionStart={this.onTransitionStart}        onTransitionEnd={this.onTransitionEnd}      />    );}

Props

configureTransitionfunction

被Transitioner.componentWillReceiveProps,这个函数允许定制动画的参数,例如延续时间.这个函数返回的值将会传递进入时间序列函数,默认是Animated.timing().

Examples

_configureTransition(transitionProps, prevTransitionProps) {  return {    // duration in milliseconds, default: 250    duration: 500,    // An easing function from `Easing`, default: Easing.inOut(Easing.ease)    easing: Easing.bounce,  }}

注意:duration和easing只用当时间序列函数是Animated.timing的时候才可以应用.我们可以根据不同的config参数来使用不同的时间函数.

 _configureTransition(transitionProps, prevTransitionProps) {  return {    // A timing function, default: Animated.timing.    timing: Animated.spring,    // Some parameters relevant to Animated.spring    friction: 1,    tension: 0.5,  }}

Flow definition

configureTransition: (    transitionProps: NavigationTransitionProps,    prevTransitionProps: ?NavigationTransitionProps,  ) => NavigationTransitionSpec,

Parameters

• transitionProps:有当前的navigation state和props创建的当前NavigationTransitionProps
• prevTransitionProps:从前一个navigation stae和props创建的前一个NavigationTransitionProps

Returns

• NavigationTransitionSpec类型的对象,作为参数传递进动画时间序列函数

navigationState对象
代表navigation state的简单对象

实例值

{   // Index refers to the active child route in the routes array.  index: 1,  routes: [    { key: 'DF2FGWGAS-12', routeName: 'ContactHome' },    { key: 'DF2FGWGAS-13', routeName: 'ContactDetail', params: { personId: 123 } }  ]}

Flow definition

 export type NavigationState = {  index: number,  routes: Array<NavigationRoute>,};

了解更多的NavigationRoute的类型,查看flow definition

render函数

由Transition.render()调用.这个函数代理了Transitioner的实际渲染功能.在这个函数中,我们可以使用包含在transitionProps和prevTransitionProps中的参数来渲染scene,创建动画和处理手势操作.

transitionProps和prevTransitionProps有一些重要的属性对于上面提到的一些任务是十分有用的.

• scenes:Array<NavigationScene>-可以使用的scenes的列表
• position:NavigationAnimation- transitioner的navigation state的进度索引
• progress:NavigationAnimationedValue-当navigation state从一个转变到另一的时候,这个值代表了演变的进度.从0-1的数值

查看完整的NavigationTransitionProps的属性列表.查看看flow definition

实例

transitionProps.scenes是可以使用的scenes的列表.这个列表依赖于实施者准备怎么来列出screen.例如,可以像下面的代码来渲染cards的堆栈

 _render(transitionProps, prevTransitionProps) {  const scenes = transitionProps.scenes.map(scene => this._renderScene(transitionProps, scene));  return (    <View style={styles.stack}>      {scenes}    </View>  );}

我们可以使用Animated.View去执行演变动画.为了创建必要的动画样式属性,例如透明度,我们可以在position和progress中利用transitionProps来插值.

 _renderScene(transitionProps, scene) {  const { position } = transitionProps;  const { index } = scene;  const opacity = position.interpolate({    inputRange: [index-1, index, index+1],    outputRange: [0, 1, 0],  });  // The prop `router` is populated when we call `createNavigator`.  const Scene = this.props.router.getComponent(scene.route.routeName);  return (    <Animated.View style={{ opacity }}>      { Scene }    </Animated.View>  )}

上面的代码创建交叉渐隐的动画.
深入理解如何创建定制的transitions,看看这个博客帖子

Flow definition

render: (transitionProps: NavigationTransitionProps, prevTransitionProps: ?NavigationTransitionProps) => React.Element<*>,

参数

• transitionProps:从当前state和props创建的NavigationTransitionProps.
• prevTransitionProps:从之前的state和props创建的先前NavigationTransitionProps

Returns

• React元素,用来渲染Transitioner 组件

onTransitionEnd函数

动画演变完成后调用一次.

Flow definition

 onTransitionEnd: () => void

参数

• none

  Returns

• none