[React Native] Bottom Bar & Transfer page_ navigation v5

Bottom Bar (하단 바) & 페이지 전환

 

하단 바와 페이지 전환을 하는 방법을 찾는데 생각보다 오랜 시간이 걸렸다.

까먹지 않기 위해 정리해둔다.

 

npm install @react-navigation/bottom-tabs

npm install @react-navigation/native

npm install @react-navigation/stack

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

위와 같이 명령어를 Terminal에 입력하여 설치해준다.

 

🙄 import

import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

 

🙄 Bottombar와 page 전환을 함께 구현하기 위하여 아래와 같이 코드 작성

const Stack=createStackNavigator();
const Tab=createBottomTabNavigator();

// bottombar
function TabStack({navigation, route}){
  return(
    <Tab.Navigator tabBarOptions={{ css }}>
       <Tab.Screen name="이름이름" component={ 이름이름 }/>
       <Tab.Screen name=" 이름이름 " component={ 이름이름 }/>
    </Tab.Navigator>
  )
}

// page 
export default function App(){
  return(
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown:false -> 상단에 바 없애기 }}>
        <Stack.Screen name="A" component={A}/>
        <Stack.Screen name="B" component={TabStack -> bottombar 함수명}>
        <Stack.Screen name="C" component={C}>
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  )
}

 

🙄 B.js

 

A.js -> B.js로 페이지 전환할 때 

<TouchableOpacity onPress={()=>navigation.navigate('B')}>
          <Text>test</Text>
</TouchableOpacity>

onPress={()=> navigation.navigate('B')}

 

 

🙄 C.js

 

전 페이지를 가고 싶을 때

// if 하단 바로 여러 페이지를 갔다가 C.js에서 B.js로 가고싶을때
<TouchableOpacity onPress={()=>navigation.push('B')} >
             
</TouchableOpacity>

 

// if 바로 전 페이지를 가고 싶을때
<TouchableOpacity onPress={()=>navigation.goBack()} >
             
</TouchableOpacity>

 

🙄 class형에서 사용할경우

 

   render(){
        const {navigation}=this.props;
        return(
        	<TouchableOpacity onPress={()=>this.props.navigation.navigate('Weekly')}>
            </TouchableOpacity>
        )
  }