• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    미해결

Tab에서 선언한 컴포넌트에게 props로 전달하는법

21.01.07 23:09 작성 조회수 378

0

class HomeScreenTab extends Component {
...
<Tab.Navigator ...
...
...
...
<Tab.Screen name="홈" component={firstTab} />

위와 같이 한 클래스 내에서 Tab navigator 선언한 다음에 tab component를 만들었습니다.

그러고 나서 firstTab이라는 하위 클래스에 props로 인자를 전달해주려고 하는데 선언문 형태가 아니라 어떻게 전달할 수 있을지 궁금합니다!

답변 1

답변을 작성해보세요.

0

kimhj4268,<o:p></o:p>

 

안녕하세요지식공유자 Wintho 입니다.<o:p></o:p>

해당 질문에 답변 드립니다.<o:p></o:p>

 

props 통한 데이터 전달은 부모/자식 관계가 형성되어야 합니다.<o:p></o:p>

우선, HomeScreenTab firstTab 부모/자식 관계가 맞는지부터 확인을 하셔야 하고, 만일 화면간 데이터 전달이 목적이라고 하신다면 screen 정의하는 코드에서 구현할 필요는 없습니다.<o:p></o:p>

화면을 정의하는 파일에서 화면 이동 이벤트를 발생시키는 컴포넌트가 있을텐데 그곳에서 자식 클래스로 넘길 데이터를 정의하시기 바랍니다.<o:p></o:p>

 

e.g. A화면 -> B화면 이동<o:p></o:p>

 

. A화면 정의 파일<o:p></o:p>

<TouchableOpacity<o:p></o:p>

            onPress={()=>{<o:p></o:p>

              this.props.navigation.push('B', {<o:p></o:p>

                dataA: true,<o:p></o:p>

                dataB: 100,<o:p></o:p>

              })<o:p></o:p>

            }}

<o:p></o:p>><o:p></o:p>

     <Image<o:p></o:p>

        source={require('../../assets/images/sample.png')}<o:p></o:p>

        style={{width: 50, height: 50}}<o:p></o:p>

        esizeMode="contain"<o:p></o:p>

      /><o:p></o:p>

</TouchableOpacity><o:p></o:p>

 

감사합니다.<o:p></o:p>