时间戳

首页 > 解决方案 > 如何将图标添加到nativebase组件的日期选择器反应原生

javascript - 如何将图标添加到nativebase组件的日期选择器反应原生

问题描述

我正在使用本机基本 UI 组件库中的日期选择器组件，是否有任何可用于显示图标的道具。

标签： javascriptreactjsreact-native

解决方案

目前还没有在 Datepicker 上显示图标的原生方式。

但是你可以这样做：

<View>
    <Text style={styles.label}>Birth Date</Text>
    <View style={styles.datePickerInput}
    >
        <DatePicker
            ref={datePicker}
            maximumDate={new Date()}
            locale="en"
            modalTransparent={false}
            animationType="fade"
            androidMode="spinner"
            placeHolderText="Select a date"
            placeHolderTextStyle={{ color: '#d3d3d3', fontFamily: 'default' }}
            textStyle={{ color: '#222', fontFamily: 'default', fontSize: 15 }}
            disabled={false}
        >
        </DatePicker>
        <View>
            <Icon
                active
                name='calendar'
                style={styles.datepickerIcon}
                onPress={handleDatePickerIconClick}
            />
        </View>
    </View>
</View>

请记住使用ref触发日期选择器：

const datePicker = useRef();

const handleDatePickerIconClick = () => {
    datePicker.current?.showDatePicker();
}

推荐阅读