React-Native + expo

환경 구축

먼저 react-native 환경을 셋팅하는 방법(CLI, command-line interface)에는 여러가지가 있다.
expo, react-native init, Ignite, CRNA

먼저 expo는 초기 셋팅이 편리하고 expo의 다양한 api를 사용할 수 있는 장점이 있지만 native접근이 못하는 단점이 있다.
(설치 : npm install -g expo-cli)

react-native init으로 셋팅을 하게 되면 native 접근이 가능해진다. 하지만 expo를 사용하기 위해 따로 셋팅을 해줘야 한다.
(설치 : npx react-native init 파일이름)

Ignite에서는 ignite에서는 여러가지의 다양한 라이브러리(ex: React Navigation, detox, typescript, ...)등이 설치되어있고 파일들이 분류되어있어 왠만한 초기 셋팅이 모두 되어있다.
(설치 : npx ignite-cli new 파일이름)

CRNA(create-react-native-app)에서는 reactJS의 creat-react-app에서 영감을 받아 만든 것으로 native의 기능을 사용하면서expo도 접근이 가능하다
(설치 : npx create-react-native-app)

초기설정

로딩하기 전에 이미지와 폰트같은 assets들을 받아와야 하기 때문에
startAsync, onFinsh, onError 설정을 해줘야 한다.

startAsync

로딩되기 전의 설정으로 assets들과 font를 받아온다.

const loadFonts = (fonts) => fonts.map((font) => Font.loadAsync(font));

const loadAssets = (assets) =>
  assets.map((asset) => {
    if (typeof asset === "string") {
      return Image.prefetch(asset); //원격저장소에 있는 asset 받아오기
    } else {
      return Asset.loadAsync(asset); //로컬에있는 asset 받아오기
    }
  });
  
export default function App() {
  const [ready, setReady] = useState(false);
  
  // ! 1st
  const startAsync = () => async () => {
    const fonts = loadFonts([Ionicons.font]);
    const images = loadAssets([
      require("./my_face.jpg"),
      "https://avatars.githubusercontent.com/u/76520477?v=4",
    ]);
    await Promise.all([...fonts, ...images]);
  };
  
  // ! 2nd
  const onFinish = () => setReady(true);

  if (!ready ) { // 받아오기 전
    return (
      <AppLoading
      startAsync={startAsync}
      onFinish={onFinish}
      onError={console.error}
      />
    );
  }
  // !3rd 받아온 후
  return <Text>은경아 안녕~~ 공부열심히하고 꼭 살빼서 사람답게 살어!</Text>;
}

원격이미지를 업로드 할 필요가 없다면
preload 설정을 해주는 대신 useFonts, useAssets을 이용해서 로컬의 정보를 받아올 수 있다.

export default function App() {
  
  const [ready] = useAssets([require("./my_face.jpg")]);
  const [loaded] = Font.useFonts(Ionicons.font)

  if (!ready || loaded) { // 받아오기 전
    return (
      <AppLoading
      />
    );
  }
  // !3rd 받아온 후
  return <Text>은경아 안녕~~ 공부열심히하고 꼭 살빼서 사람답게 살어!</Text>;
}

네비게이션

https://reactnavigation.org/docs/getting-started
여기에 나와있는대로 설치해준다.
yarn add @react-navigation/native
expo install react-native-screens react-native-safe-area-context

그리고 원래대로면 android/app/src/main/java/<your package name>/MainActivity.java 에 코드 수정을해서 오버로드를 작성해줘야하지만 CRNA를 이용해서 설치하였다면 이미 설정이되어있다.

Button tab navigation

이제 tab을 만들고 사용할 것인데 stack navigation을 사용하던 tab navigation을 사용하던 먼저 NavigationContainer로 감싸줘야지 사용할 수 있다 (reactJS 의 브라우저라우터 같은 느낌)

하지만 어림없지

해결방법
https://velog.io/@dudrbs1040/ReactNative-%EC%98%A4%EB%A5%98

하지만 어림없지

해결방법
https://stackoverflow.com/questions/66921263/invariant-violation-requirenativecomponent-rnsscreen-was-not-found-in-the-ui

다시 설치하고 다시 시작하니깐 된다ㅎㅎ 컴퓨터는 참 신기해

자 이제 여기 여러가지 prop를 줘서 설정으 바꿔줄 수 있다.
https://reactnavigation.org/docs/bottom-tab-navigator

Tab.Navigation에 적용을 하면 모든 tab에 적용할 수 있고
Tab.Screen에 적용하면 해당 tab에만 적용한다.

ex)

const Tabs = () => (
  <Tab.Navigator
    initialRouteName="돼지"
    screenOptions={{
      tabBarLabelStyle: { backgroundColor: "yellow", color: "black" },
    }}
  >
    <Tab.Screen name="은경이는" component={Movies} />
    <Tab.Screen
      name="돼지"
      component={Tv}
      options={{ tabBarLabelStyle: { backgroundColor: "blue" } }}
    />
    <Tab.Screen name="멍청이" component={Search} />
  </Tab.Navigator>
);

Native Stack navigation

Tab + Stack navigation

1번째 방법
Tab Compoenent안에 stack navigation을 넣어서 작업한다.

2번째 방법
Tab과 Stack이 병렬로 존재하게 root navigation을 만들어서 안에 넣어준다.
onPress={() => navigate("Stack", { screen: "Two" })}
경로를 따라서 navigate해줘야한다.

styled-components 로 css다루기

reactjs에서 하던것 처럼
yarn add styled-components로 설치하고
사용할때만
import styled from "styled-components/native"
로 사용하면 동일하게 작동한다.

(https://styled-components.com/docs/basics#react-native)

ReactNative + TypeScript

typescript를 사용하기 위해
yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer
설치!

그리고 tsconfig.json을 만들어준다.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es2017"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

(참고 : https://reactnative.dev/docs/typescript)

styled components를 ts로 사용하기 위해
npm install @types/styled-components @types/styled-components-react-native
설치!

(참고 : https://styled-components.com/docs/api#typescript)

ReactJs와는 다르게 React Native는 typescript가 컴파일을 해주지않는다. 단지 타입체크만 해주며 도와줄 뿐이다. 따라서 에러가 발생하도 작동은 한다. (안좋은건가..?)