mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-02-12 09:21:09 +08:00
feat: if cardStyle has flexed specified, set the same value on P… (#206)
* feat: if cardStyle has flexed specified, set the same value on PointerEventsView * Stop producing empty object if no override is needed * Change produced false to undefined * Update cardStyle to handle arrays * Update code to use StyleSheet.flatten * Use better styling * Update snapshots
This commit is contained in:
50
packages/stack/example/src/DragLimitedToModal.js
Normal file
50
packages/stack/example/src/DragLimitedToModal.js
Normal file
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import { View, Text, StyleSheet, Dimensions } from 'react-native';
|
||||
import Animated from 'react-native-reanimated';
|
||||
|
||||
const HEIGHT = Dimensions.get('screen').height;
|
||||
|
||||
const { interpolate } = Animated;
|
||||
|
||||
const DragLimitedToModal = () => (
|
||||
<View style={styles.modal}>
|
||||
<Text style={styles.text}>Adjusts to the size of text</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
DragLimitedToModal.navigationOptions = {
|
||||
gestureDirection: 'vertical',
|
||||
gestureResponseDistance: { vertical: HEIGHT },
|
||||
cardTransparent: true,
|
||||
cardStyleInterpolator: ({ current }) => {
|
||||
const translateY = interpolate(current.progress, {
|
||||
inputRange: [0, 1],
|
||||
outputRange: [HEIGHT, 0],
|
||||
});
|
||||
|
||||
return {
|
||||
cardStyle: {
|
||||
transform: [{ translateY }],
|
||||
flex: undefined,
|
||||
},
|
||||
containerStyle: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
modal: {
|
||||
padding: 30,
|
||||
borderRadius: 15,
|
||||
backgroundColor: '#000',
|
||||
},
|
||||
text: {
|
||||
fontSize: 18,
|
||||
color: '#fff',
|
||||
},
|
||||
});
|
||||
|
||||
export default DragLimitedToModal;
|
||||
Reference in New Issue
Block a user