(TIL 23일차) React Native 완료

빡기·2020년 2월 20일

TIL(Today I Learned)

목록 보기

17/43

westagram 리액트 네이티브 시연 영상

React Native와 React 차이 고찰

import의 불편함

import React, { Component } from "react";
import {
  View,
  Image,
  ScrollView,
  FlatList,
  ImageBackground,
  Text
} from "react-native";
import Storystyle from "./Storystyle";
// 매우 불편했음

리액트와 다르게 Text,View 등등 해당 객체를 이용하고 싶을 때마다 import에 추가 해줘야 한다는 불편한 점이 매우 컸다

css의 제한성

import { StyleSheet } from "react-native";

export default StyleSheet.create({
  nav_bar: {
    width: "100%",
    height: "12%",
    borderBottomWidth: 0.8,
    borderColor: "#dddddd",
    backgroundColor: "#FAFAFA",
    justifyContent: "center"
  },
  nav_icons: {
    width: 30,
    height: 30,
    bottom: 10,
    backgroundColor: "#FAFAFA",
    position: "absolute"
  }
});

리액트의 스타일 컴포넌트 처럼 css를 적용해서 import하는 방식을 사용 했다.
but 네이티브를 아직 조금만 공부해서 그런지 모르겠지만 리액트 처럼 내가 직접 작성해 주입가능한 @keyframe, animation 제한적인 사항이 많았다.

각 요소들의 속성 이름 및 기능의 차이

  <TextInput
   placeholder="  댓글 달기..."
   style={{ left: 5, width: "100%" }}
   onChangeText={text => {
      this.setState({
        comment: text
      });
    }}
   value={this.state.comment}
   onSubmitEditing={this.handleSubmit}
 ></TextInput>

리액트와 같이 input과 TextInput의 의미는 같지는 onChangeText 처럼 속성들이 다른 부분이 있었다.

라우터 방식의 차이

// app.js
import { createSwitchNavigator, createAppContainer } from "react-navigation";

export default createAppContainer(
  createSwitchNavigator(
    {
      MainRoute: MainRoute,
      Login: Login
    },
    {
      initialRouteName: "Login"
    }
  )
);

// mainRoute.js
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const FeedStack = createStackNavigator();

export default function MainRoute() {
  return (
    <NavigationContainer>
      <FeedStack.Navigator>
        <FeedStack.Screen name="Bottom" component={Bottom} />
      </FeedStack.Navigator>
    </NavigationContainer>
  );
}