/
NativeScreensExample.tsx
47 lines (43 loc) 路 1.17 KB
/
NativeScreensExample.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Button from '../../components/button';
import withModalProvider from '../withModalProvider';
import BackdropExample from '../modal/BackdropExample';
const RootScreen = () => {
const { navigate } = useNavigation();
return (
<View style={styles.container}>
<Button
label="Navigate to Native Modal"
// @ts-ignore
onPress={() => navigate('NativeModal')}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
});
const NativeStack = createNativeStackNavigator();
export default withModalProvider(() => (
<NativeStack.Navigator>
<NativeStack.Screen
name="Root"
component={RootScreen}
options={{ headerShown: false }}
/>
<NativeStack.Screen
name="NativeModal"
component={BackdropExample}
options={{
presentation: 'modal',
headerShown: Platform.OS === 'ios',
}}
/>
</NativeStack.Navigator>
));