[React-Native] Drawer | Style 설정 02

* Side Drawer에 Content 커스터마이징하기

(그림 삽입)

 

 

---

 

 

1. <Drawer.Navigator> 태그 안에 drawerContent property에 호출되는 CustomDrawerContent 함수에서 삽입

 

•  'Help' Content에 그림 삽입하기

<DrawerItem
        label="Help"
        onPress={()=>Linking.openURL('http://www.google.com')}
        icon={()=><LogoTitle/>}
      />

  - icon이라는 property 사용해 <LogoTitle>을 함수로 받아오기

 

 

 

 

---

 

 

2. <Drawer.Screen> 태그에서 options라는 property 사용

 

• 'Home' Content에 그림 삽입하기

<Drawer.Screen 
            name="Home" 
            component={DrawerHomeScreen}
            options={{
              drawerIcon: () => (
                <Image
                  source={PictogramHome}
                  style={{width: 40, height: 40}}
                />
              )
            }}
/>

  - <Image> 태그를 이용해 source property로 이미지의 경로 넣어주기

 

 

 

 

---

 

 

3. DrawerContent의 각 component가 되는 class에서 직접 설정하기

 

• 'User' Content에 그림 삽입하기

drawerStyle = () => {
        this.props.navigation.setOptions({
            drawerIcon: () => (
                <Image
                  source={Logo}
                  style={{width: 40, height: 40}}
                />
              )
        })
    }

  - 근데 이래도 그대로다. Why?

  - 우리가 만든 함수 drawStyle()은 호출되지 않아, DrawUserScreen 클래스가 앱이 랜더링 될 때 반영되지 않음

 

  - 즉, user_drawer.js라는 파일에서 export되는 DrawUserScreen이라는 클래스가 앱 랜더링 시에 반영이 되어야 하고,

  그러면 이게 component로 호출되는 User Content가 터치되거나 User Screen으로 이동이 되어야 하는 것

  -> Home Screen의 'To User Screen' 버튼을 이용해 이동해보자

 

  - 그럼 이제 변경되었다.