jineecode

https://jineecode.tistory.com/260 React navigation (1) 1. NavigationContainer import {NavigationContainer} from '@react-navigation/native'; navigation tree를 관리하고 navigation state를 포함하는 구성 요소. 이 구성 요소는 모든 네비게이터 구조를 랩핑해야.. jineecode.tistory.com 먼저, 내비게이션은 기본적으로 '스택'으로 쌓이기 때문에, 본인이 개발하고자하는 앱의 내비게이션의 흐름을 잘 파악해야 손이 덜 간다. 스택을 제대로 구분하여 나누지 않는다면 부자연스러운 흐름을 직면할 수밖에 없다. 앱의 정책마다 스택의 흐름이 다르고 아래보다 더 좋은 방법이 있..

1. NavigationContainer import {NavigationContainer} from '@react-navigation/native'; navigation tree를 관리하고 navigation state를 포함하는 구성 요소. 이 구성 요소는 모든 네비게이터 구조를 랩핑해야하며, 즉, Root에 있어야한다. 때문에 일반적으로 App.tsx 에 랩핑한다. 2. createStackNavigator import {createStackNavigator} from '@react-navigation/stack'; const Stack = createStackNavigator(); Screen 및 Navigator라는 두 가지 속성이 포함 된 객체를 반환하는 함수. S..

1. React Native의 Dimensions import {Dimensions} from 'react-native'; const basicDimensions = { width: 360, height: 800, }; const width: any = ( Dimensions.get('screen').width * (1 / basicDimensions.width) ).toFixed(2); const height: any = ( Dimensions.get('screen').height * (1 / basicDimensions.height) ).toFixed(2); const fontSizes = { fontSizes16: width * 16, fontSizes14: width * 14, fontSizes1..

Attempt to invoke interface method 'boolean com.swmansion.reanimated.layoutReanimation.NativeMethodsHolder.isLayoutAnimationEnabled()' on a null object reference 다음 코드로 고친다. https://github.com/software-mansion-labs/reanimated-2-playground/commit/71642dbe7bd96eb41df5b9f59d661ab15f6fc3f8 Android · software-mansion-labs/reanimated-2-playground@71642db This commit does not belong to any branch on th..

Warning: [react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system! 다음과 같은 버전으로 설치해주세요. yarn add react-native-gesture-handler@2.1.1

1. Header를 가리고 싶을 때 screenOptions={{headerShown: false}} 를 적어줍니다. const LoginNavigator = () => { return ( ); }; 2. 특정 페이지에서 내비게이션을 가리고 싶을 때 const NoticeList = ({navigation}) => { ... useEffect(() => { const parent = navigation.dangerouslyGetParent(); parent.setOptions({ tabBarVisible: false, }); return () => parent.setOptions({ tabBarVisible: true, }); }, []); }) 가리고 싶은 js(tsx)에 useEffect를 사용하여 ..

1. typescript를 적용해서 RN 프로젝트 생성하기 npx react-native init MyApp --template react-native-template-typescript 1) 설치에 실패했다면? Removing module react-native-template-template-typescript... error This module isn't specified in a package.json file. info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this command. warn Failed to clean up template temp files in node_modules/react-native..

*데이터 타입을 타입스크립트로 정의할 때 같은 파일에서 정의하면 해당 파일 안에서만 타입을 정의할 수 있다. 그러나 @types/index.d.ts 를 만들고 해당 파일 안에서 타입을 정의하면 프로젝트 전반에 걸쳐 타입을 사용할 수 있다. context은 전반에 걸쳐 사용될 예정이므로 @types/index.d.ts 파일에 따로 저장하는 것이 좋다. 1. AsyncStorage 설치 2. Context 1) src/Context/TodoListContext/@types/index.d.ts interface ITodoListContext { todoList: Array; addTodoList: (todo: string) => void; removeTodoList: (index: number) => void..