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