20201118 TIL ReactNative
React Native
A framework for building native apps using React
- 크로스 브라우징이 가능한 앱 제작이 가능함.
- Javascript 로 작성, App이 build 될 때 네이티브 코드로 변환됨.
Expo?
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
특징
- 교육용으로 적합하며, 실무에서는 거의 사용하지 않음
- 상대적으로 사용 가능한 라이브러리 수가 적다
- 차차 Expo에서도 사용 가능한 라이브러리의 수가 증가되는 추세로, 이후 사용 범위에 영향을 줄 수 있을 것 같다.
Expo 어플을 통해 리액트 네이티브 앱을 내 휴대폰에서 바로바로 확인할 수 있었다.
How to Start
npm install --global expo-cli
expo init my-project (my-project 라는 폴더 생성)
cd my-project
yarn start ( 해당 앱은 expo 앱에서 확인 가능하게 하는 QR코드 생성됨)
vsCode 에서 폴더 열기
Basic
Text
react와는 다르게 리액트 네이티브에서는 글자는 무조건 <Text></Text>
로 감싸있어져야한다.
Image
src 대신에 source, url 대신에 uri 로 작성한다.
<Image style={styles.image}
source={{ uri: "https://images.unsplash.com/photo-1545494097-1545e22ee878?ixlib=rb-.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60"}} />
View
html의 div와 비슷한 태그. 의미는 없지만 묶는 경우 많이 사용.
Style 작성법
styled-components와 비슷한 방식으로 StyleSheet를 사용해서 작성
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
touchableBtn: {
height: 48,
display: "flex",
justifyContent: "center",
alignItems: "center",
},
scrollView: {
width: "100%",
backgroundColor: "#f8f8f8",
},
image: {
height: 150,
width: 150,
},
});
Advanced
TouchableOpacity
클릭하는 경우 Opacity가 변화하는 button 태그로 이해하면 이해가 편하다.
유저가 버튼을 클릭했는지 알 수 있게 해준다.
Button 태그와는 다르게 기본 Style이 없어서 사용하는 경우도 존재한다.
ScrollView
Scroll이 되어야하는 컴포넌트를 제작할 경우 필요하다.
웹과는 다른 점이니 꼭!!! 기억해두기!
bounces : true / false. 스크롤 할 경우 바운스 효과가 있게 할 것인지 혹은 없게 할 것인지 정할 수 있다.
Pressable
다양한 이벤트들을 감지할 수 있는 버튼. 참고는 Pressable React Native 에서 가능!
Navigation
@react-navigation/stack
npm install @react-navigation/native
혹은 yarn add @react-pagination/native
로 react-navigation을 설치해준 뒤, expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
로 expo에 라이브러리를 설치해준다.
stack 되는 navigation을 사용해주기 위해서 yarn add @react-navigation/stack
실행.
App.js 혹은 index.js에서 const Stack = createStackNavigator();
선언해주고 Routes처럼 NavigationContainer로 감싸줘야함.
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "./src/screens/home/Home";
import DetailsScreen from "./src/screens/detail/Detail";
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName={"Home"}>
<Stack.Screen name="Detail" component={DetailsScreen} />
<Stack.Screen
name="Home"
component={Home}
options={{ title: "OverView" }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
페이지 이동시키기 위해서는 button 등에 onPress={() => navigation.navigate("Detail")}
로 작성해준다.
Author And Source
이 문제에 관하여(20201118 TIL ReactNative), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sunnysideup0w0/20201118-TIL-ReactNative저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)