Today I Learned 📖

react native 심화 복습

1)App icon, Splash Screen 이미지 변경

App icon -> 피그마링크 : 피그마에서 각 이미지를 생성하고 저장해서 assets파일에 복붙하면 끝 !

2) React Navigation - Bottom Tab Navigator

App.js에는 컴포넌트만 남겨준다.
네비게이션을 사용하기 위해서는 해당 컴포넌트를 아래와 같이 감싸준다.

<NavigationContainer>
  <Tabs /> 
</NavigationContainer>

여기서 Tabs는 BottomTab네비가 들어가는 컴포넌트!!

Bottom Tab Navigator 네비를 사용하기 위한 기본 설치를 해주고, 임포트도 해주기.

네비게이터에 옵션을 줄때는,
Tab.navigator -> screenOptions
Tab.Screen -> options

//Tab.Screen에서 아이콘 변경해줄때, 
options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="movie-filter" size={size} color={color} />
          ),
        }}

4)React Navigation병합

Root파일을 만들어 Stacks.js/Tabs.js를 병합한다. 그리고 App.js파일에서 Root.js임포트하기 -> BottomTabNavigator의 스크린인 Movies.js에 가서 NativeStackNavigator를 불러와준다.

<TouchableOpacity
   onPress={() => navigate("Stacks", { screen: "one"})}> 
     <Text>Detail</Text>
</TouchableOpacity>

(9) Movies 스크린 UI 완성

오늘의 에러🛠

Text strings must be rendered within a <Text> component.

텍스트가 나와야하는 부분에서 텍스트 사용을 안해주니 계속 뜨는 오류,, 텍스트 넣어주기 !