일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 애니메이션
- xcode
- ipad
- 비전공자
- iPhone
- button
- 자바스크립트
- css3
- Animation
- jQuery
- MAC
- effect
- CSS
- 풀스택
- IOS
- 프론트엔드
- javascript
- 개발자
- front-end
- hover
- php
- iOS 개발자
- 비전공 개발자
- react
- 백엔드
- keyframes
- SWIFT
- image
- html5
- HTML
- Today
- Total
목록React Native (7)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cZOkW7/btrCXSqh1Wg/w8iVfDBwFoPY1LfGpqux1k/img.png)
위의 에러가 발생해서 pod install이 안되는 경우의 해결 절차 1. 특정 프로젝트의 ios/Podfile 열기 2. use_flipper!() 주석 3. pod install
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bXSnfz/btryQptwM6v/psnFU1kztMmvZfCH5ghyn1/img.png)
* npm i three @react-three/fiber * box.js import { useFrame } from "@react-three/fiber"; import { useState, useRef } from "react"; export default function Box({ color, ...props }) { const [isHovered, setIsHovered] = useState(false); const ref = useRef(); useFrame(() => { ref.current.rotation.x += 0.01; ref.current.rotation.y += 0.01; }); return ( { setIsHovered(true); }} onPointerOut={() => { se..
import * as React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import Settings from './src/pages/Settings'; import Orders from './src/pages/Orders'; import Delivery from './src/pages/Delivery'; import {useState} from 're..
import React, { useEffect } from "react"; import { StatusBar } from "expo-status-bar"; import { Text, View, StyleSheet, BackHandler, Alert } from "react-native"; import { WebView } from "react-native-webview"; import Constants from "expo-constants"; const MYLINK = "https://relaxed-turing-e7ea57.netlify.app"; // android 뒤로가기 버튼 클릭 시, 종료 확인 안내 문구 표시 const App = () => { useEffect(() => { const back..
import React from "react"; import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View } from "react-native"; import { WebView } from "react-native-webview"; const MYLINK = "https://relaxed-turing-e7ea57.netlify.app"; export default function App() { return ( WEBVIEW ); } const styles = StyleSheet.create({ container: { marginTop: 40, padding: 30, flex: 1, alignItems: "center", ju..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b3OPoF/btrsFsBiyDT/2xdkkyBecrLO0nsUb4MIek/img.png)
정의된 자식에 대한 다양한 Press 상호 작용 단계를 감지할 수 있는 핵심 구성 요소 import React from 'react'; import {View, Text, Pressable} from 'react-native'; const Button = props => { return ( { console.log('Press In'); }} onPressOut={() => { console.log('Press Out'); }} onPress={() => { console.log('Press'); }} onLongPress={() => { console.log('Long Press'); }} delayLongPress={3000} pressRetentionOffset={{button: 50, left: ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dwKn1b/btrqGUmxutM/FxjvebSdTenNKlio8w1YAk/img.jpg)
Props: Properties의 줄임말, 부모 컴포넌트로부터 전달된 속성값 또는 상속받은 속성값 - 부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서는 해당 props를 사용할 순 있지만 수정은 불가능 (수정을 원하면 부모 컴포넌트에서 수정) import React from 'react'; import { Text, View } from 'react-native'; import MyButton from './components/MyButton'; const App = () => { return ( Props alert('props')} /> alert('children')}> Children Props alert('default')} /> ); }; export default Ap..