RN｜系统组件之唯一的输入组件 TextInput 📝

值控制属性

<TextInput
  // 输入值
  value="文本内容"
  defaultValue="默认值"
  
  // 值变化回调
  onChangeText={(text) => console.log(text)}
  onChange={(event) => console.log(event.nativeEvent.text)}
  
  // 编辑状态回调
  onFocus={() => console.log('获得焦点')}
  onBlur={() => console.log('失去焦点')}
  
  // 提交回调
  onSubmitEditing={(event) => console.log('提交')}
  onEndEditing={(event) => console.log('结束编辑')}
/>

外观属性

<TextInput
  // 样式
  style={styles.input}
  
  // 占位符
  placeholder="请输入..."
  placeholderTextColor="#999"
  
  // 文本对齐
  textAlign="left" // 'center', 'right'
  textAlignVertical="center" // 'top', 'bottom'
  
  // 选择文本颜色
  selectionColor="#007AFF"
/>

键盘属性

<TextInput
  // 键盘类型
  keyboardType="default"
  // 可选值：
  // 'default', 'number-pad', 'decimal-pad', 'numeric',
  // 'email-address', 'phone-pad', 'ascii-capable',
  // 'numbers-and-punctuation', 'url', 'name-phone-pad',
  // 'twitter', 'web-search'
  
  // 键盘外观
  keyboardAppearance="light" // 'dark' (iOS)
  
  // 返回键类型
  returnKeyType="done"
  // 可选值：
  // 'done', 'go', 'next', 'search', 'send',
  // 'none', 'previous', 'default', 'emergency-call',
  // 'google', 'join', 'route', 'yahoo'
  
  // 返回键启用状态
  returnKeyLabel="完成" // Android
  enablesReturnKeyAutomatically={true} // iOS
/>

 输入控制属性

<TextInput
  // 自动大小写
  autoCapitalize="none"
  // 可选值：'none', 'sentences', 'words', 'characters'
  
  // 自动修正
  autoCorrect={false}
  
  // 自动完成
  autoComplete="off"
  // 众多可选值，如：'email', 'password', 'username', 'tel' 等
  
  // 文本内容类型（iOS）
  textContentType="none"
  // 可选值：'none', 'URL', 'addressCity', 'addressCityAndState',
  // 'addressState', 'countryName', 'creditCardNumber',
  // 'emailAddress', 'familyName', 'fullStreetAddress',
  // 'givenName', 'jobTitle', 'location', 'middleName',
  // 'name', 'namePrefix', 'nameSuffix', 'nickname',
  // 'organizationName', 'postalCode', 'streetAddressLine1',
  // 'streetAddressLine2', 'sublocality', 'telephoneNumber',
  // 'username', 'password'
  
  // 密码输入
  secureTextEntry={false}
  
  // 多行输入
  multiline={false}
  numberOfLines={1}
  
  // 输入限制
  maxLength={100}
  
  // 编辑状态
  editable={true}
  
  // 选择范围
  selection={{ start: 0, end: 0 }}
  selectTextOnFocus={false}
  
  // 输入上下文菜单
  contextMenuHidden={false}
  
  // 在提交时（按下回车键）是否让输入框失去焦点
  blurOnSubmit={false}
  
  // 隐藏光标
  caretHidden={true}
  
  // 是否可编辑
  editable={false}
/>

方法

// 获取引用
const inputRef = useRef<TextInput>(null);

// 可用方法
inputRef.current?.focus();  // 获取焦点
inputRef.current?.blur();   // 失去焦点
inputRef.current?.clear();  // 清除内容
inputRef.current?.isFocused();  // 检查焦点状态

// 选择文本
inputRef.current?.setSelection(
  start: number,
  end?: number
);

事件处理

<TextInput
  // 按键事件
  onKeyPress={({ nativeEvent }) => {
    console.log('按键:', nativeEvent.key);
  }}
  
  // 选择事件
  onSelectionChange={({ nativeEvent }) => {
    console.log('选择范围:', nativeEvent.selection);
  }}
  
  // 内容大小变化
  onContentSizeChange={({ nativeEvent }) => {
    console.log('内容大小:', nativeEvent.contentSize);
  }}
  
  // 滚动事件（多行时）
  onScroll={({ nativeEvent }) => {
    console.log('滚动位置:', nativeEvent.contentOffset);
  }}
/>

平台特定属性

<TextInput
  // iOS 特有
  clearButtonMode="never" // 'while-editing', 'unless-editing', 'always'
  clearTextOnFocus={false}
  dataDetectorTypes="none" // 'phoneNumber', 'link', 'address', 'calendarEvent', 'all'
  
  // Android 特有
  autoComplete="off" // Android 特定的自动完成选项
  textAlignVertical="center"
  underlineColorAndroid="transparent"
/>

样式属性

const styles = StyleSheet.create({
  input: {
    // 基础样式
    height: 40,
    width: '100%',
    padding: 10,
    
    // 边框
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    
    // 字体
    fontSize: 16,
    fontFamily: 'System',
    color: '#000',
    
    // 其他
    backgroundColor: '#fff',
    shadowColor: '#000',
    elevation: 2,
  }
});