welcome.js

만드는 방법
check!!
1. image load
2. styled. 다음에 붙는거 확인( View, Text, Touchable, image등등..)

1. welcome.js

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>
  )
}

2. 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>
  )
}

3.AuthButton

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>
  )
}