react native 기본 예제 따라하기 3 (react navigation)

1. react navigation method

navigate - go to another screen, figures out the action it needs to take to do it
goBack - close active screen and move back in the stack
addListener - subscribe to updates to navigation lifecycle
isFocused - function that returns true if the screen is focused and false otherwise.
state - current state/routes
setParams - make changes to route's params
getParam - get a specific param with fallback
dispatch - send an action to router
dangerouslyGetParent - function that returns the parent navigator, if any

const {navigation}=this.props; navigation.navigate("screens","{parameters}")

2. textinput 값을 state로 받기

state ={
  id:""
};

handle=text=>{
  this.setState({id:text});
};

<TextInput onChangeText={this.handle} />


https://kingchobocoding.tistory.com/62

3. goBack()으로 데이터 전달하기

 1. 메인페이지

state={
  id:"",
  pass:""
}
setIdPass=data=>{
  this.setState(data);
}
onPress=()=>{
  this.props.navigation.navigate("Register",{setIdPass:this.setIdPass})
}

메인페이지에서 setIdPass 함수를 parameter로 넘긴다.

 2. 서브페이지

goBack=(data)=>{
  const {navigation}=this.props;
  navigation.state.params.setIdPass(data)
  navigation.goBack();
}

parameter로 받은 메소드를 navigation.state.params.setIdPass()로 실행시킨다.

{}의 값은 rendet()에서 변수나 함수를 불러올 때 사용

4. tab 만들기

Tab.js 파일 생성

import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
// 하단 탭에 들어갈 컴포넌트들
import HomeTab from '../screens/tab/HomeTab'
import SecondTab from '../screens/tab/SecondTab'


// 하단 탭 네비게이터 생성
const AppTabNavigator = createBottomTabNavigator({
  HomeTab: { screen: HomeTab },
  SecondTab: { screen: SecondTab },

});

const AppTabContainet = createAppContainer(AppTabNavigator);
export default AppTabContainet;

각각 tab 페이지 만들기

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default class HomeTab extends Component {
    render() {
        return (
            <View style={style.container}>
                <Text>HomeTab</Text>
            </View>
        );
    }
}

const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});

메인페이지에 넣기
import AppTabContainet from '../navigator/Tab';

return (
      <AppTabContainet/>
      
    );

https://velog.io/@anpigon/React-Native-UI-%EB%A7%8C%EB%93%A4%EA%B8%B0-1