TIL] React Native-Basic
😎 Component
*React Native를 사용하면 IOS, Android 개발을 별도로 하지 않고 App 배포가 가능하다. 그게 가능한 이유는 IOS와 Android는 tag를 구분하여 사용하는데 RN에서는 그것을 포괄하는 Component를 제공하고 App이 배포될 때 각각의 언어로 conversion 되기 때문이다.
+ TouchableOpacity:
button tag가 있지만 custom의 어려움 때문에 TouchableOpacity를 많이 사용한다.
😇 Styling
<Default 설정>
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
bigBlue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
1) display: flex; + flex-direction: column;
2) flex: 1; (width,height: 100%, 100vw, 100vh 등)
🙂 React Library
1) react-navigation/native: react-router-dom의 기능을 한다.
npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
사용법: 아래의 코드를 js file에 import 하고 NavigationContainer component를 사용한다.
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
<NavigationContainer>
</NavigationContainer>
2) react-navigation/stack: 유저가 이동한 페이지의 위치를 자동으로 기억하고 prevPage로 이동을 도와준다.
npm install @react-navigation/stack
사용법: 아래의 코드를 js file에 import 하고 Stack.Navigator를 사용한다.
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
<Stack.Navigator>
3) navigation.###
navigation.navigate:
이동하려는 page의 경로가 명확한 경우, 쌓인 route를 무시하고 해당 페이지로 이동할 때 사용한다.navigation.popToTop:
가장 첫번째 화면으로 이동할 때 사용한다.navigation.push:
동일 page 경로에서 다른 정보들을 표현할 경우에 사용한다.(push 할 때마다 새로운 route가 쌓인다 === stack!)navigation.goBack:
이전 route stack으로 이동할 경우 사용한다.
👒 emulator reload 방법
. window : ctrl + M
. mac: command + D
Author And Source
이 문제에 관하여(TIL] React Native-Basic), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@link717/TIL-React-Native-Component저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)