React Native で適切に最適化されたサインイン画面を作成するには、多くの場合、入力フィールドがキーボードで隠されないようにキーボード操作を処理する必要があります。このガイドでは、カスタム フックを利用してキーボード オフセットの高さを管理し、アニメーション調整を備えたキーボード対応のサインイン画面を構築する手順を説明します。また、ヘッダー画像を追加し、見た目が美しく機能的なレイアウトになるように画面を整理します。
カスタム フック useKeyboardOffsetHeight は、キーボードの表示/非表示イベントをリッスンし、レイアウト調整をアニメーション化するために重要なキーボードの高さを返します。このフックにより、機能が iOS と Android の両方で確実に動作するようになります。
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; }
メイン コンポーネントは、カスタム useKeyboardOffsetHeight フックとアニメーション API を使用して、サインイン フォームのスムーズな移行を管理します。フォームには、電子メールとパスワードのフィールド、サインイン ボタン、ヘッダー画像が含まれています。
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;
このキーボード対応のサインイン画面は、次のようなスムーズでユーザーフレンドリーなエクスペリエンスを提供します。
このアプローチを使用すると、特に画面スペースとキーボードとのユーザー操作が重要な考慮事項となるモバイル デバイス上で、洗練された機能的なテキスト入力 UI を作成できます。この設定は、より多くのフォーム フィールドや機能で拡張でき、React Native 認証フローの優れた基盤となります。
以上がReact Native でスムーズなキーボード認識サインイン画面を構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。