[TIL] 내배캠4기-React Native-65일차

hare·2023년 1월 3일

내배캠-TIL

목록 보기

47/75

React Navigation 라이브러리
Navigation prop
- navigate
- goBack
- reset (나중에..)
RN에서 useEffect와 useFocusEffect의 차이

Screen 컴포넌트

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="one" component={One} />
        <Stack.Screen name="two" component={Two} />
        <Stack.Screen name="three" component={Three} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

스크린 컴포넌트 - <Stack.Screen 안에 만든 컴포넌트

navigate

const One = ({ navigation: { navigate } }) => {
  return (
    <TouchableOpacity onPress={() => navigate("two")}>
      <Text>One</Text>
    </TouchableOpacity>
  );
};

goBack

const Three = ({ navigation: { goBack } }) => {
  return (
    <TouchableOpacity onPress={() => goBack()}>
      <Text>Three</Text>
    </TouchableOpacity>
  );
};

useEffect

useEffect(()=>{
  `마운트 됐을 때 실행될 코드`
  return ()=>{
  `언마운트 됐을 때 실행될 코드`}
  }, []);

useFocusEffect

useFocusEffect 는 매개변수로 useCallback 을 받는다.
useCallback 은 인자로 콜백함수를 받는데, useEffect 와 매우 유사하다.

useFocusEffect(
useCallback(()=>{
`현재 화면에 보일 때 실행되는 코드`
return ()=>{
`화면에서 사라졌을 때 실행되는 코드`}
}, [])
);

과제 중 🔧

과제하다가 ImageBackground 에 스타일을 주려다 원하는대로 되지 않아 한참 애를 먹었다..

수정 전 코드

// 배경
const BgImgSt = styled.ImageBackground`
width: 100%;
opacity: 0.3;
`;

opacity 로 불투명한 배경 효과를 주고싶었는데

앞의 포스터까지 함께 적용되어 버림.. 안돼앵..

💡
imageStyle 을 imageBackground 태그에 따로 주니까 원하는대로 적용이 되었다!

<BgImgSt
        source={require("../assets/background.jpeg")}
        // imageStyle로 주니까 배경만
        imageStyle={{ opacity: 0.3 }}
      >
        <View style={{ flexDirection: "row" }}>
          <ImgSt source={require("../assets/poster.jpeg")}></ImgSt>
          <View style={{ flexDirection: "column" }}>
            <Text>타이틀</Text>
            <Text>⭐️ 별점</Text>
            <Text>영화 설명</Text>
          </View>
        </View>
</BgImgSt>