React Native) 로딩화면 페인드인 구현
2021. 7. 5. 23:12
Frontend/React & React.Native &Next.js
앞에 로딩화면 구현한 것에 로딩페이지에서 이 코드를 더해야 한다 import React from "react"; import { StyleSheet, Text, View, Image, Animated } from "react-native"; export default class LoadingScreen extends React.Component { state = { animation: new Animated.Value(1), }; componentDidMount() { setTimeout(() => { this.setState( Animated.timing(this.state.animation, { toValue: 0, duration: 2000, }).start() ); }, 1000); } rende..
React Native) splash screen(로딩화면)
2021. 7. 5. 23:10
Frontend/React & React.Native &Next.js
export default class App extends React.Component { state = { isLoading: true, }; componentDidMount = async () => { setTimeout(() => { this.setState({ isLoading: false }); }, 3000); }; render() { if (this.state.isLoading) { return ; } else { return (
ReactNative) UI에서 네비게이션 없애는 함수
2021. 7. 1. 10:02
Frontend/React & React.Native &Next.js
``` const Stack = createStackNavigator(); export default function ListStack({ navigation, route }) { // 들어갔을 때 네비게이션 없애는 함수 // 네비게이션 내에서 이동을 0으로 하고 다른곳으로 들어갈때마다 1 추가해서 네비게이션 바를 없애는 함수 route.state && route.state.index > 0 ? navigation.setOptions({ tabBarVisible: false }) : navigation.setOptions({ tabBarVisible: true }); return ( ); ``` }
ReactNative) CSS 코드
2021. 7. 1. 09:58
Frontend/React & React.Native &Next.js
container flex: 1,2,3 backgroundColor: "red" alignItems: 'center' justifyContent:"center", "flex-end" flexDirection:"row" paddingHorizontal:20 paddingVertical text color:"white" width:100