表单与交互（TextInput、键盘、焦点、权限）

// src/screens/RegisterScreen.tsx
import React, { useRef, useState } from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';

export default function RegisterScreen() {
  const [email, setEmail] = useState('');
  const [nickname, setNickname] = useState('');
  const [bio, setBio] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  const emailRef = useRef<TextInput>(null);
  const passwordRef = useRef<TextInput>(null);
  const nicknameRef = useRef<TextInput>(null);

  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    >
      <ScrollView contentContainerStyle={{ flexGrow: 1, padding: 16 }}>
        <Text style={styles.label}>邮箱</Text>
        <TextInput
          ref={emailRef}
          value={email}
          onChangeText={setEmail}
          keyboardType="email-address"
          autoCapitalize="none"
          autoCorrect={false}
          textContentType="emailAddress"
          autoComplete="email"
          returnKeyType="next"
          onSubmitEditing={() => passwordRef.current?.focus()}
          blurOnSubmit={false}
          placeholder="you@example.com"
          placeholderTextColor="#999"
          style={styles.input}
        />

        <Text style={styles.label}>密码（至少 8 位）</Text>
        <View style={styles.passwordRow}>
          <TextInput
            ref={passwordRef}
            secureTextEntry={!showPassword}
            autoCapitalize="none"
            autoCorrect={false}
            textContentType="password"
            returnKeyType="next"
            onSubmitEditing={() => nicknameRef.current?.focus()}
            blurOnSubmit={false}
            style={[styles.input, { flex: 1 }]}
          />
          <Pressable onPress={() => setShowPassword((v) => !v)} hitSlop={12} style={styles.eye}>
            <Text>{showPassword ? '隐藏' : '显示'}</Text>
          </Pressable>
        </View>

        <Text style={styles.label}>昵称（最多 12 字）</Text>
        <TextInput
          ref={nicknameRef}
          value={nickname}
          onChangeText={setNickname}
          maxLength={12}
          returnKeyType="next"
          onSubmitEditing={() => { /* 聚焦下一项 */ }}
          blurOnSubmit={false}
          style={styles.input}
        />
        <Text style={styles.counter}>{nickname.length} / 12</Text>

        <Text style={styles.label}>个人简介</Text>
        <TextInput
          value={bio}
          onChangeText={setBio}
          multiline
          numberOfLines={4}
          textAlignVertical="top"
          style={[styles.input, styles.multiline]}
        />
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  label: { fontSize: 13, color: '#666', marginTop: 16, marginBottom: 6 },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 16,
    minHeight: 44,
  },
  multiline: { height: 96, paddingTop: 10 },
  passwordRow: { flexDirection: 'row', alignItems: 'center' },
  eye: { marginLeft: 8 },
  counter: { alignSelf: 'flex-end', fontSize: 12, color: '#999', marginTop: 4 },
});

// 新密码输入框：让 iOS 钥匙串弹出"强密码建议"并正确保存
<TextInput
  secureTextEntry
  autoCapitalize="none"
  textContentType="newPassword"
  autoComplete="new-password"
/>

// 验证码输入框：iOS 自动读取短信验证码
<TextInput
  keyboardType="number-pad"
  textContentType="oneTimeCode"
  autoComplete="sms-otp"
  maxLength={6}
/>

const [bioHeight, setBioHeight] = useState(44);

<TextInput
  multiline
  onContentSizeChange={(e) => {
    // 内容高度夹在 44 ~ 160 之间，超过封顶后内部滚动
    setBioHeight(Math.min(160, Math.max(44, e.nativeEvent.contentSize.height)));
  }}
  style={{ height: bioHeight }}
/>

// 档位一：状态下沉。每个输入自己管自己，父组件不因为打字重渲染
function LabeledInput({
  label,
  defaultValue = '',
  onCommit,
}: {
  label: string;
  defaultValue?: string;
  onCommit: (v: string) => void;
}) {
  const [v, setV] = useState(defaultValue);
  return (
    <View>
      <Text style={styles.label}>{label}</Text>
      <TextInput value={v} onChangeText={setV} onBlur={() => onCommit(v)} style={styles.input} />
    </View>
  );
}

// 档位二：非受控。挂载时给 defaultValue，值只存 ref，提交时收网
function UncontrolledInput({ inputRef }: { inputRef: React.RefObject<TextInput | null> }) {
  const valueRef = useRef('');
  return (
    <TextInput
      ref={inputRef}
      defaultValue=""
      onChangeText={(t) => {
        valueRef.current = t; // 不 setState，零重渲染
      }}
      style={styles.input}
    />
  );
  // 提交时读 valueRef.current。别用 inputRef.current.value——RN 的 TextInput
  // 命令式句柄只有 focus/blur/clear/isFocused/setSelection，没有 value 读取。
}

// 档位三：react-hook-form（RN 可用，Controller 包装 TextInput）
// <Controller control={control} name="email" render={({ field }) =>
//   <TextInput value={field.value} onChangeText={field.onBlur /* 等 */} /> } />
// 字段级订阅，校验规则复用 Web 心智。

<KeyboardAvoidingView
  style={{ flex: 1 }}
  behavior={Platform.OS === 'ios' ? 'padding' : undefined}
  keyboardVerticalOffset={Platform.OS === 'ios' ? headerHeight : 0}
>
  <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    {/* 表单内容 */}
  </ScrollView>
</KeyboardAvoidingView>

const scrollRef = useRef<ScrollView>(null);

// ScrollView 上较新版本 iOS 提供了 automaticallyAdjustKeyboardInsets
// 打开后系统自动处理键盘 insets 与滚动，优先用它替代手写联动：
<ScrollView ref={scrollRef} automaticallyAdjustKeyboardInsets>

import { Keyboard, Platform } from 'react-native';

const [keyboardVisible, setKeyboardVisible] = useState(false);
const [keyboardHeight, setKeyboardHeight] = useState(0);

useEffect(() => {
  // iOS 有 will 系（动画前触发），Android 只有 did 系——监听名按平台选
  const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
  const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';

  const s1 = Keyboard.addListener(showEvent, (e) => {
    setKeyboardVisible(true);
    setKeyboardHeight(e.endCoordinates.height); // 含安全区的高度，做吸底输入框用
  });
  const s2 = Keyboard.addListener(hideEvent, () => {
    setKeyboardVisible(false);
    setKeyboardHeight(0);
  });
  return () => {
    s1.remove();
    s2.remove();
  };
}, []);

<Switch
  value={notifications}
  onValueChange={setNotifications}
  trackColor={{ false: '#d1d1d6', true: '#34c759' }}
  thumbColor={notifications ? '#ffffff' : '#f4f3f4'}
  ios_backgroundColor="#e5e5ea"
/>

function SubmitButton({
  onPress,
  children,
}: {
  onPress: () => Promise<void>;
  children: React.ReactNode;
}) {
  const [isPending, setIsPending] = useState(false);

  const handlePress = async () => {
    if (isPending) return;
    setIsPending(true);
    try {
      await onPress();
    } finally {
      setIsPending(false); // 失败也要恢复按钮，否则用户对着死按钮怀疑人生
    }
  };

  return (
    <Pressable
      onPress={handlePress}
      disabled={isPending}
      style={({ pressed }) => [
        styles.button,
        pressed && { opacity: 0.85 },
        isPending && { opacity: 0.6 },
      ]}
    >
      {isPending ? (
        <ActivityIndicator color="#ffffff" />
      ) : (
        <Text style={styles.buttonText}>{children}</Text>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#0a7',
    borderRadius: 10,
    paddingVertical: 14,
    alignItems: 'center',
    marginTop: 24,
  },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

import * as ImagePicker from 'expo-image-picker';

async function pickImage() {
  // 1. 运行时请求相册权限（Android 13+ 会自动落到 READ_MEDIA_IMAGES 细粒度权限）
  const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (!permission.granted) {
    Alert.alert('无法访问相册', '请在系统设置中开启相册权限');
    return;
  }

  // 2. 拉起系统图片选择器（较新 SDK 的 mediaTypes 用字符串数组）
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ['images'],
    quality: 0.8, // 压缩输出，0~1
  });
  if (result.canceled) return;

  // 3. 预览 + 上传
  const asset = result.assets[0];
  setPreviewUri(asset.uri);
  await uploadImage(asset.uri); // multipart 上传见 05-数据获取与网络.md
}

// 拍照版本：requestCameraPermissionsAsync + launchCameraAsync，其余同构

import { z } from 'zod';

const registerSchema = z.object({
  email: z.string().min(1, '请输入邮箱').email('邮箱格式不正确'),
  password: z.string().min(8, '密码至少 8 位'),
  nickname: z.string().min(2, '昵称至少 2 个字符').max(12, '昵称最多 12 个字符'),
});
type RegisterValues = z.infer<typeof registerSchema>;

function useRegisterForm() {
  const [values, setValues] = useState<RegisterValues>({ email: '', password: '', nickname: '' });
  const [errors, setErrors] = useState<Partial<Record<keyof RegisterValues, string>>>({});

  function submit(): boolean {
    const parsed = registerSchema.safeParse(values);
    if (!parsed.success) {
      const next: Partial<Record<keyof RegisterValues, string>> = {};
      for (const issue of parsed.error.issues) {
        const key = issue.path[0] as keyof RegisterValues;
        if (!next[key]) next[key] = issue.message; // 每字段只留第一条错误
      }
      setErrors(next);
      return false;
    }
    // 调接口……
    return true;
  }

  return { values, setValues, errors, submit };
}

// 行内错误展示组件：错误文案出现在字段下方，不弹全局 toast
function Field({
  label,
  error,
  children,
}: {
  label: string;
  error?: string;
  children: React.ReactNode;
}) {
  return (
    <View style={{ marginBottom: 4 }}>
      <Text style={styles.label}>{label}</Text>
      {children}
      {error ? (
        <Text style={{ color: '#d33', fontSize: 12, marginTop: 4 }}>{error}</Text>
      ) : null}
    </View>
  );
}