React Native 第三章

📝 一、TextInput — 文本输入框

TextInput 是 React Native 中的基础输入组件，用于让用户输入文本内容。
类似于 Web 中的 <input />。

✅ 基本用法

import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';

export default function App() {
  const [text, setText] = useState('');

  return (
    <View style={{ padding: 20 }}>
      <Text>输入内容：</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          paddingHorizontal: 8,
        }}
        placeholder="请输入内容"
        value={text}
        onChangeText={setText}
      />
      <Text>当前输入：{text}</Text>
    </View>
  );
}

⚙️ 常用属性

属性名	类型	说明
value	string	当前输入值（受控）
defaultValue	string	初始值（非受控）
placeholder	string	占位文字
onChangeText	(text: string) => void	文本变化时回调
keyboardType	string	键盘类型，如 default / numeric / email-address / phone-pad 等
secureTextEntry	boolean	是否密码输入（隐藏文字）
maxLength	number	最大输入长度
editable	boolean	是否可编辑
multiline	boolean	多行输入（类似 <textarea>）
autoFocus	boolean	自动聚焦
onFocus / onBlur	function	获取或失去焦点事件
returnKeyType	string	键盘右下角按钮文字，如 "done", "go", "search" 等
style	object	样式定义

💡Tips

• onSubmitEditing 在按下“完成”或“回车”键时触发；

• blurOnSubmit={false} 可以在多行输入时防止键盘收起；

• 可结合 useRef 获取焦点：

  const inputRef = useRef();
  inputRef.current.focus();
  

---

👆 二、TouchableOpacity — 可点击且点击时透明度变化

TouchableOpacity 是最常用的点击容器组件。
点击时会有轻微的 透明度变化，适合自定义按钮。

✅ 基本用法

import React from 'react';
import { TouchableOpacity, Text, Alert } from 'react-native';

export default function App() {
  return (
    <TouchableOpacity
      style={{
        backgroundColor: '#2196F3',
        padding: 10,
        borderRadius: 6,
      }}
      activeOpacity={0.7}
      onPress={() => Alert.alert('按钮被点击！')}
    >
      <Text style={{ color: '#fff', textAlign: 'center' }}>点我一下</Text>
    </TouchableOpacity>
  );
}

⚙️ 常用属性

属性名	类型	说明
onPress	function	点击事件
onLongPress	function	长按事件
activeOpacity	number	点击时的不透明度（0 ~ 1，默认0.2）
disabled	boolean	是否禁用
style	object	样式定义
delayPressIn / delayPressOut	number	延迟响应点击时间（毫秒）

💡Tips

• 可嵌套任意子元素（如 View, Text, Image）；
• 用于按钮、卡片点击、图片点击等场景；
• 对应 Web 习惯中 <button> 或 <div onClick> 的作用。

---

✨ 三、TouchableHighlight — 点击时背景高亮

TouchableHighlight 点击时会显示**背景高亮（变色）**效果。
适合需要明显按压反馈的 UI 元素（如列表项）。

✅ 基本用法

import React from 'react';
import { TouchableHighlight, Text, View, Alert } from 'react-native';

export default function App() {
  return (
    <TouchableHighlight
      underlayColor="#DDDDDD"
      onPress={() => Alert.alert('高亮按钮被点击！')}
      style={{
        backgroundColor: '#2196F3',
        borderRadius: 6,
        padding: 10,
      }}
    >
      <Text style={{ color: '#fff', textAlign: 'center' }}>高亮按钮</Text>
    </TouchableHighlight>
  );
}

⚙️ 常用属性

属性名	类型	说明
onPress	function	点击事件
underlayColor	string	点击时显示的高亮背景色
activeOpacity	number	点击时子元素透明度变化
onShowUnderlay / onHideUnderlay	function	高亮显示或隐藏时回调
disabled	boolean	禁用点击
style	object	样式定义

💡Tips

• 比 TouchableOpacity 视觉反馈更明显；
• 适合 列表项点击效果 或 卡片点击高亮；
• 一般不推荐嵌套过多子组件，否则高亮效果可能异常。

---

📚 对比总结

特性	TextInput	TouchableOpacity	TouchableHighlight
用途	输入文本	点击触发事件	点击触发事件（带高亮）
交互反馈	输入框光标/键盘	透明度变化	背景高亮
常用场景	登录输入框、搜索框	普通按钮、图标点击	列表项、卡片点击
可嵌套子元素	否（仅文本）	是	是
推荐度	★★★★☆	★★★★★	★★★☆☆