Use ScreenContainer and Screen components in stack - currently they fallback to RN's View

This commit is contained in:
Krzysztof Magiera 2018-08-14 14:32:19 +02:00
parent 094ebbe4a9
commit 9bfc92baa5
3 changed files with 28 additions and 6 deletions

View File

@ -1,21 +1,36 @@
import React from 'react';
import { Animated, StyleSheet } from 'react-native';
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 } = this.props;
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 (
<Animated.View
<Screen
pointerEvents={pointerEvents}
ref={this.props.onComponentRef}
style={[styles.main, style]}
active={active}
>
{children}
</Animated.View>
</Screen>
);
}
}

View File

@ -21,6 +21,7 @@ import {
import Card from './StackViewCard';
import Header from '../Header/Header';
import { ScreenContainer } from './screens';
import TransitionConfigs from './StackViewTransitionConfigs';
import { supportsImprovedSpringAnimation } from '../../utils/ReactNativeFeatures';
@ -469,9 +470,9 @@ class StackViewLayout extends React.Component {
return (
<View {...handlers} style={containerStyle}>
<View style={styles.scenes}>
<ScreenContainer style={styles.scenes}>
{scenes.map(s => this._renderCard(s))}
</View>
</ScreenContainer>
{floatingHeader}
</View>
);

View File

@ -0,0 +1,6 @@
import { Animated, View } from 'react-native';
const ScreenContainer = View;
const Screen = Animated.View;
export { ScreenContainer, Screen };