만드는 방법
check!!
1. image load
2. styled. 다음에 붙는거 확인( View, Text, Touchable, image등등..)
import React from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
import styled from 'styled-components/native'
import { colors } from '../colors'
import AuthButton from '../components/auth/AuthButton'
import AuthLayout from '../components/auth/AuthLayout'
const LoginLink = styled.Text`
color: ${colors.blue};
font-weight: 600;
margin-top: 20px;
font-size: 18px;
`
export default function Welcome({ navigation }) {
const goToCreateAccount = () => navigation.navigate('CreateAccount')
const goToLogin = () => navigation.navigate('Login')
return (
<AuthLayout>
<AuthButton
text="CreateAccount"
disabled={false}
onPress={goToCreateAccount}
/>
<TouchableOpacity onPress={goToLogin}>
<LoginLink>Log In</LoginLink> //Click되게 만들려면 TouchableOpacity로 감싼다.
</TouchableOpacity>
</AuthLayout>
)
}
import React from 'react'
import styled from 'styled-components/native'
import { Keyboard, TouchableWithoutFeedback } from 'react-native'
import KeyboardAvoidingView from 'react-native/Libraries/Components/Keyboard/KeyboardAvoidingView'
const Container = styled.View`
flex: 1; ///native에서는 flex:1 무조건임, native에서는 flex기본이 세로임
///web에서 div쓰는것이 native에서는 View임
align-items: center;
justify-content: center;
background-color: black;
padding: 0px 40px;
`
const Logo = styled.Image` ///image부를때는 styled.Image임.
max-width: 90%;
width: 100%;
height: 100px;
margin-bottom: 20px;
`
export default function AuthLayout({ children }) {
const dismissKeyboard = () => {
Keyboard.dismiss()
}
///밑에서 사용될 dismissKetboard 함수.
///import 되는것들 어떤것들인지 확인 필요!!
return (
<TouchableWithoutFeedback onPress={dismissKeyboard} style={{ flex: 1 }}>
///휴대폰 빈 공간을 터치했을떄, 폰 화면에 키보드가 사라지게 함.
///flex:1은 화면이 안깨지게 하기 위해서 엏어줌.
<Container>
<KeyboardAvoidingView style={{ width: '100%' }} behavior="position">
///회원가입이나 글자입력시 키보드가 화면에 올라올떄,
///login창이나 회원가입 창이 잘보이게 위로 올라가서 보이게 설정하는것.
<Logo
resizeMode="contain" ///resize모드는 여러개가 있는데 contain이
///그냥 사진이 맞게 배치됨.
source={require('../../assets/logo.png')}
///image load할떄는 source={require('path')}
/>
</KeyboardAvoidingView>
{children}
</Container>
</TouchableWithoutFeedback>
)
}
import React from 'react'
import styled from 'styled-components/native'
import { ActivityIndicator } from 'react-native'///loading 될때 동그라미 보여주는거
const Button = styled.TouchableOpacity`
background-color: blue;
padding: 13px 10px;
border-radius: 3px;
width: 100%;
opacity: ${(props) => (props.disabled ? '0.5' : '1')};
`
const ButtonText = styled.Text`
color: white;
font-weight: 600;
text-align: center;
`
///버튼을 만들때는 styled.Text를 styled.TouchableOpacity로 감싸줌.
export default function AuthButton({ onPress, disabled, text, loading }) {
///상위 component로부터 4개의 props를 받아서 버튼이 만들어짐.
return (
<Button disabled={disabled} onPress={onPress}>
{loading ? <ActivityIndicator /> : <ButtonText>{text}</ButtonText>}
</Button>
)
}