다이어리 앱을 만들면서 연습해보자. - 모듈설치 /Home / Write Screen

 

시작

이전글

2023.01.31 - [개발로그/ReactNative] - [dear-diary] 처음부터 다시 해보는 npx create-react-native-app dear-diary with ios 세팅! 나만의 프리셋

리엑트 네비게이션, 스타일컴포넌트 , 설치 

리엑트 네비게이션 설치 

#리엑트 네비게이션 설치 
npm install @react-navigation/native

#의존성 모듈 설치 
npx expo install react-native-screens react-native-safe-area-context

#for ios 
npx pod-install ios

리엑트 네비게이션 설치 후 오류가 있다면 여기를 참조해보자. 

리엑트 네비게이션에 대한 정리는 여기 해두었다. 

리엑트 네비게이션-스택 네비게이터 설치 

npm install @react-navigation/native-stack

스타일 컴포넌트 설치 

# with npm
npm install --save styled-components
or
# with yarn
yarn add styled-components

styled-components 적용하는 자세한 방법은 여기서 확인할 수 있다. 

 

스타일컴포넌트에 있는 Props 자동완성기능으로 보려면 

npm install @types/styled-components @types/styled-components-react-native

 

* 설치 후, package.json 에 잘 등록되었는지 확인한다. 

 

MongoDB 와 연결하기위한 realm SDK 설치 

아직은 아니지만, 조만간 사용할 것이므로 미리 설치한다. 이전에 설치할 때 버전 호환성으로 애를 먹어서 미리 하는 것이 좋을 것 같아 적어두었다. 

package.json 파일을 열고 expo , react-native 버전을 확인 한 뒤 적절한 realm 버전을 선택하도록 한다. 

realm - expo 호환성 차트

호환성 차트는 여기서 확인 할 수 있다.  현재 expo: ~47 , react-native:0.70  node : 16.x 이므로 11.3.1 을 설치 하였다. 

npm install realm@11.3.1

#for only ios 
cd ios && pod install && cd ..

 

그리고 Splash Screen  설치 

expo AppLoading은  expo 45에서 deprecated 되었으므로, Splash screen을 설치해야한다. 

npx expo install expo-splash-screen

 

Home.js

App.js

import { NavigationContainer } from "@react-navigation/native";
import React from "react";
import Navigator from "./navigator";

export default function App() {
  return (
    <NavigationContainer>
      <Navigator />
    </NavigationContainer>
  );
}

navigator.js

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Home from "./screen/Home";
import Write from "./screen/Write";
const Tabs = createNativeStackNavigator();

const Navigator = () => (
  <Tabs.Navigator screenOptions={{ headerShown: false, presentation: "modal" }}>
    <Tabs.Screen name="Home" component={Home}></Tabs.Screen>
    <Tabs.Screen name="Write" component={Write}></Tabs.Screen>
  </Tabs.Navigator>
);
export default Navigator;

Home.js

import React from "react";
import { Ionicons } from "@expo/vector-icons";
import styled from "styled-components";
import colors from "../colors";

const View = styled.View`
  flex: 1;
  padding: 0px 30px;
  padding-top: 100px;
  background-color: ${colors.bgColor};
`;
const Title = styled.Text`
  color: ${colors.textColor};
  font-size: 36px;
  margin-top: 50px;
  text-align: center;
  font-weight: 500;
`;

const Btn = styled.TouchableOpacity`
  position: absolute;
  bottom: 50px;
  right: 50px;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  background-color: ${colors.btnColor};
  elevation: 5; //for android
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
`;
const BtnText = styled.Text`
  color: white;
`;

const Home = ({ navigation: { navigate } }) => (
  <View>
    <Title>My journal</Title>
    <Btn onPress={() => navigate("Write")}>
      <BtnText>Write</BtnText>
      <Ionicons name="add" color="white" size={40} />
    </Btn>
  </View>
);
export default Home;

Write.js

import React, { useState } from "react";
import { Alert } from "react-native";
import styled from "styled-components/native";
import colors from "../colors";

const View = styled.View`
  background-color: ${colors.bgColor};
  flex: 1;
  padding: 0px 30px;
`;
const Title = styled.Text`
  color: ${colors.textColor};
  margin: 50px 0px;
  text-align: center;
  font-size: 28px;
  font-weight: 500;
`;
 

const emotions = ["🤯", "🥲", "🤬", "🤗", "🥰", "😊", "🤩"];
const Write = () => {
 
  return (
    <View>
      <Title>Write</Title>
   
    </View>
  );
};
export default Write;

다음글

2023.02.14 - [개발로그/ReactNative] - 다이어리 앱을 만들면서 연습해보자. - mongoDB 연동(Realm open/스키마 정의 하기)

끝