Machine_웅_Note

AppRegistry 여기서 주의해야 할 것은 AppRegistry.registerComponent 의 첫번째 파라미터로 넘겨주는 ‘Hello’ 이다. react-native-cli 의 init 명령을 통해서 실행하게 되면 프로젝트명이 여기에 들어가는데 이것을 기준으로 ios 내부 브릿지에서 해당 모듈을 찾는다. 즉 기본 설정이 프로젝트명이다. 물론 수정가능하지만 ios 부분을 수정해야 한다. 추가적으로 HelloWorldApp이 첫번째 렌더링 될 컴포넌트인 것을 알 수 있다. AppRegistry를 통해서 시작하는 컴포넌트를 지정하고 그 해당 컴포넌트의 render 메서드를 통해서 뷰를 렌더링 한다.

import React, { Component } from 'react'; class App extends Component { render() { const greeting = 'Welcome to React'; return ( /**Class Greeting에 greeting이라는 props를 임의로 입력*/ ); } } class Greeting extends Component { render() { return {this.props.greeting}; /** 입력한 props 사용*/ } } export default App;

export default class App extends Component { // 키보드를 화면에서 사라지게 함( dismissKeyboard () { Keyboard.dismiss() } render () { return ( {/* UI의 버튼에 dismissKeyboard 메서드를 연결 */} Dismiss Keyboard ) } } styles = StyleSheet.create({ container: { flex: 1, marginTop: 150, }, input: { margin: 10, backgroundColor: '#ededed', height: 50, padding: 10 }, button: { height: 50, backgroundColor: '#dddddd', margin: 10..

import React,{Component} from 'react'; import { Clipboard, getString, AppState, TextInput, View, Text, StyleSheet, TouchableHighlight, Dimensions, Platform, PermissionsAndroid } from 'react-native'; import Geolocation from '@react-native-community/geolocation' export default class App extends Component { constructor(){ super() this.state = { originalCoords:{}, updatedCoords:{}, id:'' } this.clea..

https://aboutreact.com/react-native-android-permission/ var that = this; //Checking for the permission just after component loaded async function requestCameraPermission() { //Calling the permission function const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, { title: 'AndoridPermissionExample App Camera Permission', message: 'AndoridPermissionExample App nee..

import React,{Component} from 'react'; import {View,Text,StyleSheet,TextInput} from 'react-native' class login extends Component{ static navigationOptions = { headerShown:false } constructor(){ super(); this.state = { hidePassword: true } } render() { return ( ) } } const styles = StyleSheet.create({ loginMainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, imageBox:{ widt..

import { createStackNavigator } from 'react-navigation-stack'; import { createAppContainer, createSwitchNavigator } from 'react-navigation'; import { createDrawerNavigator } from 'react-navigation-drawer'; import login from './Login/login' import intro from './intro' // 로그인과 인트로 화면은, 스텍으로 const Loging_in_Index = createStackNavigator( { login: { screen: login } } ) const Intro_in_Index = createSt..

export default class App extends Component{ render(){ return( SomeText ); } } const styles = StyleSheet.create({ container:{ marginLeft:20, marginTop:20 }, message:{ fontSize:18 }, warning:{ color:'red' } }) Text의 스타일을 배열을 열어서, 여러가지 StyleSheet를 적용 하였다. 만약에, 동일한 설정을 배열에 담게되면, 마지막으로 들어간 설정이 적용 된다.

/** * @format */ import React from 'react' import {AppRegistry} from 'react-native'; //import App from './app/App'; import App from './app/test'; import {name as appName} from './app.json'; const TodoApp =()=> AppRegistry.registerComponent(appName, () => TodoApp); AppRegistry.registerComponent(appName, () => TodoApp); 의 두번째 인수에서 앱의 진입점을 변경한다.

1. 컴포넌스 생성부터 완료의 호출 순서를 보면 constructor ➡️ componetWillMount(depricated) ➡️ render ➡️ componetDidMount 2.prop변화가 있을 경우 호출 순서를 보면 componentWillReceiveProps(depricated) ➡️ shouldComponetUpdate (false 시 업데이트 취소) ➡️ componetWillUpdate(depricated) ➡️ render ➡️ componetDidUpdate 3.state변화가 있으면.. shouldComponetUpdate (false 시 업데이트 취소) ➡️ componetWillUpdate(depricated) ➡️ render ➡️ componetDidUpdate 4.컴포..