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
안에 만든 컴포넌트
const One = ({ navigation: { navigate } }) => {
return (
<TouchableOpacity onPress={() => navigate("two")}>
<Text>One</Text>
</TouchableOpacity>
);
};
const Three = ({ navigation: { goBack } }) => {
return (
<TouchableOpacity onPress={() => goBack()}>
<Text>Three</Text>
</TouchableOpacity>
);
};
useEffect(()=>{ `마운트 됐을 때 실행될 코드` return ()=>{ `언마운트 됐을 때 실행될 코드`} }, []);
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>