React Native中如何给datetimepicker聚焦的输入框添加边框？

@react-native-community/datetimepicker 作为原生封装组件，其内部的输入区域样式无法直接通过组件props单独修改，直接给style属性加边框会作用于整个组件容器。要实现仅聚焦时给中间输入区域加边框的需求，最可靠的方式是自定义输入触发区域，通过受控状态完全控制样式表现。

实现步骤 #

1. 用状态管理选中的时间、选择器显示状态以及输入框的聚焦状态
2. 自定义一个TextInput作为触发区域，控制其聚焦时的边框样式
3. 点击自定义输入框时弹出DateTimePicker，选择完成后更新时间并隐藏选择器

完整代码示例 #

import React, { useState } from 'react';
import { SafeAreaView, TextInput, StyleSheet, View } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const TimePickerScreen: React.FC = () => {
  const [selectedTime, setSelectedTime] = useState(new Date());
  const [showPicker, setShowPicker] = useState(false);
  const [isFocused, setIsFocused] = useState(false);

  // 格式化时间为HH:mm格式显示
  const formattedTime = selectedTime.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  });

  const handleTimeChange = (event: any, date?: Date) => {
    setShowPicker(false);
    if (date) {
      setSelectedTime(date);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* 自定义输入触发区域 */}
      <View style={styles.inputWrapper}>
        <TextInput
          value={formattedTime}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          onPressIn={() => setShowPicker(true)}
          style={[
            styles.input,
            isFocused && styles.inputFocused
          ]}
          editable={false}
          placeholder="选择时间"
          placeholderTextColor="#999"
        />
      </View>

      {/* 原生时间选择器 */}
      {showPicker && (
        <DateTimePicker
          testID="timePicker"
          value={selectedTime}
          mode="time"
          is24Hour={true}
          display="spinner"
          onChange={handleTimeChange}
          textColor="white"
          style={styles.picker}
        />
      )}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#1A1B1E"
  },
  inputWrapper: {
    width: '80%',
    marginBottom: 20
  },
  input: {
    height: 50,
    paddingHorizontal: 15,
    backgroundColor: '#333',
    color: 'white',
    borderRadius: 8,
    fontSize: 16
  },
  inputFocused: {
    borderWidth: 2,
    borderColor: '#007AFF' // 聚焦时的边框颜色，可根据需求自定义
  },
  picker: {
    width: '100%',
    backgroundColor: '#222'
  }
});

export default TimePickerScreen;

方案说明 #

• 自定义的TextInput完全可控，聚焦时的边框样式可以通过isFocused状态自由调整
• 点击输入框弹出原生DateTimePicker，选择完成后自动更新显示内容
• 这种方式避开了原生组件内部样式无法修改的限制，同时保留了原生选择器的交互体验
• 如果需要更贴合设计图的样式，可以进一步调整TextInput的背景色、边框圆角等属性

内容的提问来源于stack exchange，提问作者Rabab Zahra