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

configureTransition

function

被

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