Machine_웅_Note

이전 드로어 레이아웃 만들기에서 App.js 에 임폴트 해주고 case 추가 Menu.js 에 버튼 이벤트 추가 해준다 . import React, { Component } from 'react' // 'react-native'에서 ViewPagerAndroid 가져오기 import { View, Text } from 'react-native' import ViewPager from "@react-native-community/viewpager" import Home from './Home' import Toolbar from './Toolbar' class ViewPagerComponent extends Component { render () { const { pageStyle, page1Style, ..

index.js import React,{Component} from 'react' import {AppRegistry,DrawerLayoutAndroid,Button,View, TouchableWithoutFeedbackBase} from 'react-native' import App from './app/App'; import Menu from './app/Menu'; import {name as appName} from './app.json'; /* 기본 페이지를 'Home'으로 만들어 놓은 드로어 레이아웃을 루트로 랜더링 한다. */ class mycomponent extends Component{ constructor(){ super() this.state = { scene : 'Home' } ..

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를 적용 하였다. 만약에, 동일한 설정을 배열에 담게되면, 마지막으로 들어간 설정이 적용 된다.