[RN]리액트 네이티브-Today I'm Learned (01)"RN입문"

- 오늘 학습한 내용.

리액트 네이티브에 입문함.

초기 세팅 작동 원리 탐구.

 

- 오늘의 코드 내용.

import React from 'react';
import { 
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  TouchableOpacity 
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import styled from "styled-components/native";
import 'react-native-gesture-handler';

function HomeScreen({navigation}) {
  return (
    <View style={{ 
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <TouchableOpacity onPress={() => navigation.navigate('Main')}>
        <Text>Home Screen</Text>
      </TouchableOpacity>
    </View>
  );
}

function Main() {
  return (
    <View style={{ 
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <Text>Main</Text>
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} options={{ title: '유저이름' }}/>
          <Stack.Screen name="Main" component={Main} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

- 소감

리액트 네이티브라서 그런지 이름만 다르고 쓰는 방식이 달라서 그렇지 그렇게 엄청 차이 없는 것 같다.

쓰는 방식이 달라서 그런가 좀 까다롭다는 생각을 많이하는 중.

 

무엇보다 안드로이드 스튜디오에서 바로바로 Reload가 안되는 문제때문에 짜증나고 있다.

RN자체가 만들어진지 얼마안되어서 오류들이 쉽게 뜨는 것도 있겠지만, 프로그램 자체가 너무 불안정하다는 느낌을 많이 받고 있다.

 

처음 만든 페이지

 

홈스크린을 누르면 이동하는 메인 페이지