[React-Native] Drawer | Custom Component

* Side Drawer을 커스터마이징하기

 

• my_drawer.js 라는 새로운 파일 생성

class SideDrawer extends Component {
  render() {
    return (
      <View style={styles.container}>
          <Text>Hello World</Text>
      </View>
    )
  }
}

 

 

• App.js에서 CustomDrawerContent 함수 대신 SideDrawer 함수로 변경

drawerContent={props => <SideDrawer {...props} />}

 

 

 

---

 

* 여기에 그림도 넣어보고, drawer Content들도 추가해보자

 

class SideDrawer extends Component {
  render() {
    return (
      <View style={styles.container}>
          <ScrollView>
              <View>
                  <View style={styles.imageContainer}>
                      <Image
                        source={Logo}
                        style={{width: 40, height: 40}}
                      />
                  </View>
              </View>
          </ScrollView>
      </View>
    )
  }
}

  - rendering되는 곳에 <ScrollView> - <Image> 태그 안에 사진의 source 불러오기

 

 

---

 

• 새로운 태그 만들어 Content 추가하기

<Text style={styles.sectionHeading}>Section 1</Text>
                  <View style={styles.navSectionStyle}>
                      <Text style={styles.navItemStyle}>Home</Text>
                      <Text style={styles.navItemStyle}>User</Text>
                      <Text style={styles.navItemStyle}>Help</Text>
                      <Text style={styles.navItemStyle}>Info</Text>
                  </View>

 

 

 

---

 

* Content 누르면 해당 스크린으로 넘어가도록 하자

  -> onPress 속성 이용

 

import { CommonActions } from '@react-navigation/native';

 

• CommonActions

navigateToScreen = (route) => () => {
        this.props.navigation.dispatch(
            CommonActions.navigate({
                name: route,
                params: {},
            })
        )
    }

  - 여러 action creaters를 쓰게 도와줌

  - 그 중 navigation라는 ction은 특정 루트로 이동하게끔 도와주는 ction이고,

   이 action이 발생하게 되면, dispatch를 통해 state 값을 업데이트 시켜준다.

 

  - arrow function이 2개 필요하다.   ==>   return 값도 2개다.

  - 중괄호 안의 값을 return하는 함수를 또 return 값으로 받아옴

 

 

<View style={styles.navSectionStyle}>
                    <Text 
                        style={styles.navItemStyle}
                        onPress={this.navigateToScreen('Home')}
                    >
                        Home
                    </Text>

  - Screen이동을 위해 Home과 User은 이렇게 스타일을 주고,

 

<Text 
                        style={styles.navItemStyle}
                        onPress={()=>alert('Help Window')}
                    >
                        Help
                    </Text>

  - alert 창을 띄우기 위한 Help와 Info는 이렇게 스타일을 준다.