react-navigation

React Navigation | React Navigation

React Navigation은 React Native에서 화면 전환을 할 수 있도록 도와주는 라이브러리 입니다.

설치 & 사용

<aside> 💡 자세한 내용은 아래를 참고해주세요 https://reactnavigation.org/docs/getting-started/

</aside>

• 관련 모듈들을 설치해줍니다

  npm install @react-navigation/[email protected]
  npm install @react-navigation/[email protected]
  
  expo install --npm react-native-screens react-native-safe-area-context
  

• App.js에서 Navigation 관련 컴포넌트를 적용해줍니다

  ...
  import { NavigationContainer } from "@react-navigation/native";
  import { createNativeStackNavigator } from "@react-navigation/native-stack";
  
  const Stack = createNativeStackNavigator();
  
  export default function App() {
    return (
      <SafeAreaView style={styles.safeAreaView}>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Main">
  					<Stack.Screen
              name="Main"
              component={MainScreen}
              options={{
                title: "홈 화면",
              }}
            />
            <Stack.Screen
              name="Product"
              component={ProductScreen}
              options={{
                title: "상품 화면",
  						}}
  					/>
          </Stack.Navigator>
        </NavigationContainer>
      </SafeAreaView>
    );
  }
  
  ...
  

react-native-reanimated-carousel

GitHub - dohooo/react-native-reanimated-carousel: 🎠 React Native swiper/carousel component, fully implemented using reanimated v2, support to iOS/Android/Web. (Swiper/Carousel)

• Image를 Carousel 형태로 보여줄 때 사용하는 라이브러리입니다.

  <aside> 💡 기존 강의에서 사용하던 react-native-snap-carousel 라이브러리의 문제를 해결하여, 해당 라이브러리로 강의를 수정하였습니다

  </aside>

설치 & 사용

1. 관련 모듈을 설치해줍니다

   npm install [email protected]
   expo install --npm react-native-reanimated react-native-gesture-handler
   

2. babel.config.js 파일을 수정해줍니다

   • 참고
     • https://docs.expo.dev/versions/latest/sdk/reanimated/

   module.exports = function (api) {
     api.cache(true);
     return {
   		...
       plugins: ["react-native-reanimated/plugin"],
     };
   };
   

3. Babel 설정을 위해 서버를 재실행합니다

   npm start
   

4. Carousel을 import하여 사용합니다

   import Carousel from "react-native-reanimated-carousel";
   
   ...
   return (
   	...
   <Carousel
   	  data={banners}
   	  width={Dimensions.get("window").width}
   	  height={200}
   	  autoPlay={true}
   	  sliderWidth={Dimensions.get("window").width}
   	  itemWidth={Dimensions.get("window").width}
   	  itemHeight={200}
   	  renderItem={(obj) => {
   	    return (
   	      <TouchableOpacity
   	        onPress={() => {
   	          Alert.alert("배너 클릭");
   	        }}
   	      >
   	        <Image
   	          style={styles.bannerImage}
   	          source={{ uri: `${API_URL}/${obj.item.imageUrl}` }}
   	          resizeMode="contain"
   	        />
   	      </TouchableOpacity>
   	    );
   	  }}
   />
   	...
   )