mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-02-26 22:38:23 +08:00
Use ScreenContainer and Screen components in stack - currently they fallback to RN's View
52 lines
1.1 KiB
JavaScript
52 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import { StyleSheet } from 'react-native';
|
|
import { Screen } from './screens';
|
|
import createPointerEventsContainer from './createPointerEventsContainer';
|
|
|
|
const EPS = 1e-5;
|
|
|
|
/**
|
|
* Component that renders the scene as card for the <StackView />.
|
|
*/
|
|
class Card extends React.Component {
|
|
render() {
|
|
const {
|
|
children,
|
|
pointerEvents,
|
|
style,
|
|
position,
|
|
scene: { index },
|
|
} = this.props;
|
|
const active = position.interpolate({
|
|
inputRange: [index, index + 1 - EPS, index + 1],
|
|
outputRange: [1, 1, 0],
|
|
extrapolate: 'clamp',
|
|
});
|
|
return (
|
|
<Screen
|
|
pointerEvents={pointerEvents}
|
|
ref={this.props.onComponentRef}
|
|
style={[styles.main, style]}
|
|
active={active}
|
|
>
|
|
{children}
|
|
</Screen>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
main: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: '#E9E9EF',
|
|
shadowColor: 'black',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 5,
|
|
},
|
|
});
|
|
|
|
Card = createPointerEventsContainer(Card);
|
|
|
|
export default Card;
|