mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-05-26 15:07:19 +08:00
chore: migrate to monorepo
This commit is contained in:
48
example/src/DragLimitedToModal.tsx
Normal file
48
example/src/DragLimitedToModal.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import { View, Text, StyleSheet, Dimensions } from 'react-native';
|
||||
import { NavigationStackScreenComponent } from 'react-navigation-stack';
|
||||
|
||||
const HEIGHT = Dimensions.get('screen').height;
|
||||
|
||||
const DragLimitedToModal: NavigationStackScreenComponent = () => (
|
||||
<View style={styles.modal}>
|
||||
<Text style={styles.text}>Adjusts to the size of text</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
DragLimitedToModal.navigationOptions = {
|
||||
cardStyle: { backgroundColor: 'transparent' },
|
||||
gestureDirection: 'vertical',
|
||||
gestureResponseDistance: { vertical: HEIGHT },
|
||||
cardStyleInterpolator: ({ current }) => {
|
||||
const translateY = current.progress.interpolate({
|
||||
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