如何在日期选择器反应本机中的焦点输入周围添加边框？

Question

我正在构建一个日期选择器，我正在使用“@react-native-community/datetimepicker”：“8.0.1”，我想在我的焦点输入周围添加边框，如下所示：在此处输入图像描述

但是它在整个组件周围添加了边框，就像一个盒子一样。我只希望它位于中间的周围，默认情况下是灰色的。

我的代码是这样的，我尝试按样式、文本样式添加边框，但它是在整个组件周围添加它。 我想添加如图所示的边框，但不知道如何添加

import React from 'react';
import { SafeAreaView } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const TimePickerScreen: React.FC = () => {
  return (
    <SafeAreaView style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#1A1B1E" }}>
      <DateTimePicker
        testID="timePicker"
        value={new Date()}
        mode="time"
        is24Hour={true}
        display="spinner"
        onChange={() => {}}
        textColor="white"
        style={{ flex: 1, width: "100%" }}
      />
    </SafeAreaView>
  );
};

export default TimePickerScreen;

Answer 1

我找到的唯一解决方案是添加一个额外的

View

作为边框。

<View style={{flexDirection: 'row'}}>
   <DateTimePicker
        testID="timePicker"
        value={new Date()}
        mode="time"
        is24Hour={true}
        display="spinner"
        onChange={() => {}}
        textColor="white"
      />
    <View style={{backgroundColor: 'white', width: 2, height: ' 100%'}} />
</View>