|
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 * as React from "react";
import { Button, View } from "react-native";
//Drawer Import
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
//화면 1
//Notification으로 가는 버튼을 추가했다.
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Button
onPress={() => navigation.navigate("Notifications")}
title="Go to notifications"
/>
</View>
);
}
//화면 2
//Home으로 돌아가는 버튼을 추가했다.
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
);
}
const Drawer = createDrawerNavigator();
//초기 루트 설정하고
//Screen을 넣어준다!
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
|
cs |
// drawer 1개와 2의 화면으로 구성된 코드
|
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
import * as React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from "@react-navigation/drawer";
//Feed Screen에 2개의 버튼
function Feed({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Feed Screen</Text>
<Button title="Open drawer" onPress={() => navigation.openDrawer()} />
<Button title="Toggle drawer" onPress={() => navigation.toggleDrawer()} />
</View>
);
}
function Notifications() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Notifications Screen</Text>
</View>
);
}
//props가 이해가 안되니...
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem
label="Close drawer"
onPress={() => props.navigation.closeDrawer()}
/>
<DrawerItem
label="Toggle drawer"
onPress={() => props.navigation.toggleDrawer()}
/>
</DrawerContentScrollView>
);
}
const Drawer = createDrawerNavigator();
//총 4개의 drawer elements
//아직 props가 이해가 안된다...
function MyDrawer() {
return (
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen name="Feed" component={Feed} />
<Drawer.Screen name="Notifications" component={Notifications} />
</Drawer.Navigator>
);
}
//MyDrawer 함수 call
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
|
cs |
// props 이해가 필요한 부분!!!!!!!!!!!
|
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
import * as React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer, DrawerActions } from "@react-navigation/native";
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from "@react-navigation/drawer";
function Feed({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Feed Screen</Text>
<Button
title="Open drawer"
onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
/>
<Button
title="Toggle drawer"
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
/>
</View>
);
}
function Notifications() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Notifications Screen</Text>
</View>
);
}
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem
label="Close drawer"
onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}
/>
<DrawerItem
label="Toggle drawer"
onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
/>
</DrawerContentScrollView>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen name="Feed" component={Feed} />
<Drawer.Screen name="Notifications" component={Notifications} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
|
cs |
//위의 내용과 똑같다!!
'[React-Native]' 카테고리의 다른 글
| [React-Native] Bottom tap based Navigation (0) | 2020.09.28 |
|---|
