React Native で適切に最適化されたサインイン畫(huà)面を作成するには、多くの場(chǎng)合、入力フィールドがキーボードで隠されないようにキーボード操作を処理する必要があります。このガイドでは、カスタム フックを利用してキーボード オフセットの高さを管理し、アニメーション調(diào)整を備えたキーボード対応のサインイン畫(huà)面を構(gòu)築する手順を説明します。また、ヘッダー畫(huà)像を追加し、見(jiàn)た目が美しく機(jī)能的なレイアウトになるように畫(huà)面を整理します。

この実裝の特徴:

1. キーボード認(rèn)識(shí): キーボードの高さに基づいて、畫(huà)面の位置が調(diào)整されます。
2. スムーズ アニメーション: キーボードが表示または非表示になるときにアニメーションで遷移します。
3. 再利用可能なカスタム フック: キーボードの高さを動(dòng)的に管理するための useKeyboardOffsetHeight フック。

1. カスタムフック: useKeyboardOffsetHeight

カスタム フック useKeyboardOffsetHeight は、キーボードの表示/非表示イベントをリッスンし、レイアウト調(diào)整をアニメーション化するために重要なキーボードの高さを返します。このフックにより、機(jī)能が iOS と Android の両方で確実に動(dòng)作するようになります。

import { useEffect, useState } from 'react';
import { Keyboard } from 'react-native';

export default function useKeyboardOffsetHeight() {
  const [keyboardOffsetHeight, setKeyboardOffsetHeight] = useState(0);

  useEffect(() => {
    const showListener = Keyboard.addListener('keyboardWillShow', (e) => {
      setKeyboardOffsetHeight(e.endCoordinates.height);
    });
    const hideListener = Keyboard.addListener('keyboardWillHide', () => {
      setKeyboardOffsetHeight(0);
    });

    const androidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
      setKeyboardOffsetHeight(e.endCoordinates.height);
    });
    const androidHideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardOffsetHeight(0);
    });

    return () => {
      showListener.remove();
      hideListener.remove();
      androidShowListener.remove();
      androidHideListener.remove();
    };
  }, []);

  return keyboardOffsetHeight;
}

2. 主要コンポーネント: アプリ

メイン コンポーネントは、カスタム useKeyboardOffsetHeight フックとアニメーション API を使用して、サインイン フォームのスムーズな移行を管理します。フォームには、電子メールとパスワードのフィールド、サインイン ボタン、ヘッダー畫(huà)像が含まれています。

import React, { useEffect, useRef, useState } from 'react';
import { Animated, Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import useKeyboardOffsetHeight from './useKeyboardOffsetHeight';

const App = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const keyboardOffsetHeight = useKeyboardOffsetHeight();
  const animatedValue = useRef(new Animated.Value(0)).current;

  const handleSignIn = () => {
    // Handle sign-in logic here
    console.log('Email:', email);
    console.log('Password:', password);
  };

  // Animate view based on keyboard height
  useEffect(() => {
    Animated.timing(animatedValue, {
      toValue: keyboardOffsetHeight ? -keyboardOffsetHeight * 0.5 : 0, // adjust "0.5" as per requirement to adjust scroll position
      duration: 500,
      useNativeDriver: true,
    }).start();
  }, [keyboardOffsetHeight]);

  return (
    <View style={styles.container}>
      <View style={{ flex: 1 }}>
        <Image
          source={{
            uri: 'https://cdn.shopaccino.com/igmguru/articles/Become-React-Native-Developer.png?v=496',
          }}
          style={styles.image}
          resizeMode="cover"
        />
      </View>
      <Animated.ScrollView
        bounces={false}
        keyboardShouldPersistTaps="handled"
        keyboardDismissMode="on-drag"
        style={{ transform: [{ translateY: animatedValue }] }}
        contentContainerStyle={styles.box}
      >
        <Text style={styles.title}>Sign In</Text>
        <TextInput
          style={styles.input}
          placeholder="Email"
          value={email}
          onChangeText={setEmail}
          keyboardType="email-address"
          autoCapitalize="none"
        />
        <TextInput
          style={styles.input}
          placeholder="Password"
          value={password}
          onChangeText={setPassword}
          secureTextEntry
        />
      </Animated.ScrollView>
      <TouchableOpacity style={styles.signInButton} onPress={handleSignIn}>
        <Text style={styles.buttonText}>Sign In</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f9f9f9',
  },
  image: {
    flex: 1,
    borderRadius: 10,
  },
  box: {
    flex: 1,
    width: '100%',
    backgroundColor: 'lightblue',
    padding: 20,
    borderRadius: 10,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  input: {
    height: 50,
    borderColor: '#ddd',
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 10,
    marginBottom: 15,
    fontSize: 16,
    backgroundColor: '#f9f9f9',
  },
  signInButton: {
    width: '100%',
    marginTop: 20,
    backgroundColor: '#4a90e2',
    borderRadius: 8,
    paddingVertical: 15,
    alignItems: 'center',
    marginBottom: 40,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default App;

まとめ

このキーボード対応のサインイン畫(huà)面は、次のようなスムーズでユーザーフレンドリーなエクスペリエンスを提供します。

• カスタム フックを使用して、キーボード オフセットの高さを動(dòng)的に管理します。
• アニメーションを適用して、キーボードがアクティブなときにフォームを表示し続けます。
• 畫(huà)像ヘッダー、適切なスタイルの入力フィールド、目立つサインイン ボタンを使用して、視覚的に魅力的なレイアウトを構(gòu)築。

このアプローチを使用すると、特に畫(huà)面スペースとキーボードとのユーザー操作が重要な考慮事項(xiàng)となるモバイル デバイス上で、洗練された機(jī)能的なテキスト入力 UI を作成できます。この設(shè)定は、より多くのフォーム フィールドや機(jī)能で拡張でき、React Native 認(rèn)証フローの優(yōu)れた基盤(pán)となります。

以上がReact Native でスムーズなキーボード認(rèn)識(shí)サインイン畫(huà)面を構(gòu)築するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。