登録/登録実施-(2)SignIn/Up Screens

19225 ワード
react native ログイン 佐夫 会員収入 テキストリンク
  • 卒業プロジェクトを行っている間に記録された内容
  • 今期の文章は全部で6つのシリーズがあって、notJust.devのyoutubeのビデオを見る時学ぶ内容ありがとうございます.🙏
    • 登録/登録実施シリーズの第2、3の文章は以下の通りである.
    前述の第1編では,コードを用いてUIを記述する方法について説明する.
    第2話はSigninとSignUpscreenで、
    第3編では、他のscreen実装について詳しく説明します.

    SignInScreen



    SignInScreenを構成するコンポーネントには、テキスト、カスタム入力、カスタムボタンが含まれます.

    次のように、画面を構成する要素の階層を定義して起動します.
    TextInputとInputの値をSubmitに変換するための構成部品も、他の画面で繰り返し使用され、カスタマイズされたコンポーネントとして作成されます.
    *navigationを単独で構築するのではなく、シミュレータで実装画面を表示する場合は、アプリケーションを使用します.検証は、jsから対応するscreenをインポートしてにロードする場合にのみ行います.

    あらかじめ設定

  • プロジェクトファイルにsrcというファイル
    • を作成する
  • srcの内部にコンポーネントとスクリーンというファイル
    • を作成する
  • screensファイルにSignInScreenフォルダ
    • を作成
  • SignInScreenフォルダでSignInScreenを使用します.jsとindex.jsの作成
    (*以降すべてのScreenは同じ3、4つのプロセスを採用する)
    • // SignInScreen.js

import React from 'react';
import { View, Text, Pressable, Image, StyleSheet } from 'react-native';

const SignInScreen = () => {
	return (
    	<View />
    );
}

export default SignInScreen;
    // index.js
export { default } from './SignInScreen';

    SignInTextとSignInTextContainer


    SignInTextには2種類のサイズがあり、内容で囲まれています.
    <View style={styles.signInTextContainer}>
	<Text style={styles.signInText}>안녕하세요,</Text>
    <Text style={styles.signInText}>NEWSUM 입니다.</Text>
    <Text style={styles.signInTextS}>서비스 이용을 위해 로그인 해주세요.</Text>
</View>

const styles = StyleSheet.create({
	signInTextContainer: {
        marginTop: '23%',
        marginLeft: '9%'
    },
    signInText: {
        fontSize: 25,
        fontWeight: '500',
        color: '#FFFFFF',
        lineHeight: 29.3,
    },
    signInTextS: {
        fontSize: 12,
        fontWeight: '300',
        color: '#FFFFFF',
        marginTop: 5,
        marginBottom: 50,
        color: '#EEEEEE'
    }
 })

    CustomInput


    前述したように、NEWSUMは、同じデザインと機能を持つTextInputコンポーネントを繰り返します.CustomInputというコンポーネントを作成し、必要に応じて同じコードを繰り返してコード長を増やすことを避けるために使用します.

    あらかじめ準備する

  • src>コンポーネントファイルに顧客入力ファイル
    • を作成する
  • CustomInputファイルにCustomInputと入力します.jsとindex.js
    • の作成

    コードの作成


    SignInScreenでは、CustomInputに渡すパラメータにvalue(値)、setValue(onChangeText)、プレースホルダ、secureTextEntry(パスワード)があります.
    // CustomInput.js

// 1. CustomInput component 만들기
const CustomInput = ({value, setValue, placeholder, secureTextEntry}) => {
	return (
        <TextInput
            value={value}
            onChangeText={setValue}
            placeholder={placeholder}
            style={styles.input}    
            secureTextEntry={secureTextEntry}
        />
    );
}

// 2. style 적용
input: {
	backgroundColor: '#FFFFFF',
    width: '83%',
    height: 48,
    paddingLeft: 15,
    borderRadius: 5,
    marginBottom: 18,
    alignSelf: 'center',
    }
    // SignInScreen.js

// 1. useState와 CustomInput component import 하기
import React, { useState } from 'react';
import CustomInput from '../../components/CustomInput';

// 2. useState로 username과 password 선언
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

// 3. CustomInput component 사용하기
<CustomInput
	value={username}
    setValue={setUsername}
    placeholder="Username"
/>
<CustomInput
	value={password}
    setValue={setPassword}
    placeholder="Password"
    secureTextEntry
/>

    CustomButton


    あらかじめ準備する


    CustomInputと同じです.

    コードの作成


    SignInScreenでCustomButtonに渡すパラメータはonPress(ボタンを押すとどうなりますか?)とtext(ボタンラベル).
    // CustomButton.js

// 1. CustomButton component 만들기
const CustomButton = ({ onPress, text }) => {
	return (
    	<Pressable
        	onPress={onPress}
            style={styles.container}
        >
        	<Text style={styles.text}>
            	{text}
            </Text>
        </Pressable>
    );
}

// 2. style 적용
container: {
        width: '83%',
        height: 45,
        alignItems: 'center',
        marginBottom: 11,
        borderRadius: 5,
        backgroundColor: '#E5EBFF',
        alignSelf: 'center',
        justifyContent: 'center'
},
text: {
    color: '#545454',
    fontWeight: '700',
    fontSize: 15
}
    // SignInScreen.js

// 1. CustomButton component 불러오기
import CustomButton from '../../components/CustomButton';

// 2. CustomButton component 사용하기
<CustomButton
	onPress={onSignInPressed}
    text="Sign In"
/>

// 3. onSignInPressed 선언하기
// 일단 버튼이 잘 동작하는지 확인하는 용도로 선언
const onSignInPressed = () => {
	console.warn("onSignInPressed");
};

    KakaoLogin


    ソーシャルログインはまだ実施されていませんが、今後のプロジェクトに追加するのでpressに限定します.
    kakaoソーシャルログインでは、kakaoが指定したデザインにのみ適用されます.
    ココアデザインガイド , 「cacoxing」ログインボタンのダウンロード
    上記のリンクには、設計ソースのダウンロードと詳細が表示されます.

    あらかじめ準備する

  • srcで資産ファイル
    • を作成する
    ダウンロード
  • KakaoSingログインボタン
  • 資産ファイル
    • にイメージを追加

    コードの作成

    // SignInScreen.js

// 1. Image를 Pressable로 감싸서 터치 가능하도록 제작하기
<Pressable onPress={onSocialPressed}>
	<Image 
    	style={styles.image} 
        source={require('../../assets/kakaoLogin.png')}
    />
</Pressable>

// 2. onSocialPressed 선언하기
const onSocialPreesed = () => {
	console.warn("onSocialPressed");
};

    OtherButtonとOtherButtonContainer


    列の代わりにflexDirectionを行に設定したコンテナで、「パスワードの検索」ボタンと「会員の追加」ボタンをクリックします.

    コードの作成

    // SignInScreen.js

<View style={styles.otherButtonContainer}>
	<Pressable onPress={onForgotPasswordPressed}>
    	<Text style={styles.otherButtonText}>비밀번호 찾기  </Text>
    </Pressable>
    <Text style={styles.otherButtonText}>|</Text>
    <Pressable onPress={onSignUpPressed}>
    	<Text style={styles.otherButtonText}>  회원가입하기</Text>
    </Pressable>
</View>

// 디자인 입히기
otherButtonContainer: {
	display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 15
},
otherButtonText: {
    fontWeight: '500',
    fontSize: 12,
    color: '#EEEEEE'
}

    SignUpScreen



    SignUpScreenを構成するコンポーネントには、CustomTopbar、Text、CustomInput、およびCustomButtonが含まれます.
    (カスタム入力、カスタムボタン、テキストの実装方法はSignInScreenと同じです.)

    CustomTopbar


    これは、後で作成するページで広く使用されるtopbarコードです.
    前のページへの移動、前のページへの移動、自分のページへの移動、または最初のページへの戻りなど、さまざまな用途に応じて、異なる構成を使用できます.

    あらかじめ準備する


    CustomInputとCustomButtonと同じ

    コードの作成


    CustomTopbarに渡すパラメータには、onPressLeftとonPressRightがあります.棒グラフの左右にある記号の左テキストと右テキストをそれぞれクリックするときに実行する操作です.
    // CustomTopbar.js

// 1. Custom component 만들기
const CustomTopbar = ({ leftText, rightText, onPressLeft, onPressRight }) => {
	return (
    	<View style={styles.container}>
        	<Pressable onPress={onPressLeft}>
            	<Text style={styles.text}>{leftText}</Text>
            </Pressable>
            <Pressable onPress={onPressRight}>
            	<Text style={styles.text}>{rightText}</Text>
            </Pressable>
        </View>
    );
}

// 2. style 추가하기
container: {
    display: 'flex', 
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#7382B5'
},
text: {
    marginVertical: 13,
    marginHorizontal: 23,
    fontSize: 18,
    color: '#FFFFFF',
	fontWeight: '500'
}
    // SignUpScreen.js

// 1. CustomTopbar import 하기
import CustomTopbar from '../../components/CustomTopbar';

// 2. CustomTopbar 사용하기
<CustomTopbar
	rightText='X'
    onPressRight={onExitPressed}
/>

// 3. onExitPressed 정의하기
const onExitPressed = () => {
	console.warn("onExitPressed");
}

    の最後の部分


    今日はSignInScreenとSignUpScreenのコンポーネントを作成しました.次の記事では、残りのConfirmEmailScreen、ForgotPasswordScreen、およびNewPasswordScreenを作成します.Screenが完了すると、このシリーズではnavigationを使用して追加のインタラクティブコードを作成し、aws-ampraryを使用して実際の認証機能を実現します.
    私たちはできるだけ早く次の文章を通じて皆さんにお会いします.今日も長い文章を読んでくれてありがとう.😄 !!!!
    HTML基本構文
    puppet配備jdk