[ 스파르타 / TIL ] 내일배움캠프 #49

오늘 한 것

---

• 알고리즘 문제 풀기
• React Navigator 구현
• SAVEDUCK 프로젝트

 

오늘의 배움

---

Linear Gradient

---

npm install react-native-linear-gradient --save

 

 

Stack Navigator 설치

---

npm install @react-navigation/native-stack

 

 

앞뒤로 이동

---

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

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

const Two = ({ navigation: { navigate } }) => {
  return (
    <TouchableOpacity onPress={() => navigate('three')}>
      <Text>Two</Text>
    </TouchableOpacity>
  );
};

const Three = ({ navigation: { goback, reset } }) => {
  return (
    <View>
      <TouchableOpacity onPress={() => goback()}>
        <Text>Three</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() =>
          reset({
            index: 0,
            routes: [{ name: 'one' }],
          })
        }
      >
        <Text>Reset Navigation</Text>
      </TouchableOpacity>
    </View>
  );
};
export default function App() {
  return (
    <NavigationContainer>
      <StatusBar style='auto' />
      <Stack.Navigator>
        <Stack.Screen name='one' component={One} />
        <Stack.Screen name='two' component={Two} />
        <Stack.Screen name='three' component={Three} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

 

Dimensions.get('window');

---

아래 부분을 포함하지 않은 화면의 넓이를 구한다.

 

 

import { Dimensions } from 'react-native';

export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

 

 

vector icons 설치

---

npm install @expo/vector-icons

 

 

에러

Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.

 

해결

react-native-config를 제거하고 재실행하니 에러가 해결되었다.