react-native-modal-datetime-picker 怎么设置颜色
要设置 react-native-modal-datetime-picker 的颜色,您可以使用 customStyles 属性来自定义样式。以下是一个示例,演示如何设置背景颜色和文本颜色:
import React, { useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
const App = () => {
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const showDatePicker = () => {
setDatePickerVisibility(true);
};
const hideDatePicker = () => {
setDatePickerVisibility(false);
};
const handleConfirm = (date) => {
console.log('Selected Date:', date);
hideDatePicker();
};
return (
<View style={styles.container}>
<Button title="Show Date Picker" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirm}
onCancel={hideDatePicker}
customStyles={{
datePicker: { backgroundColor: 'white' },
datePickerText: { color: 'black' },
cancelButton: { backgroundColor: 'red' },
cancelText: { color: 'white' },
confirmButton: { backgroundColor: 'green' },
confirmText: { color: 'white' },
}}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
在上面的示例中,我们通过将 customStyles 对象传递给 DateTimePickerModal 组件来自定义样式。您可以在 customStyles 对象中设置不同的样式属性来更改颜色。在这个例子中,我们设置了 datePicker 的背景颜色为白色,datePickerText 的文本颜色为黑色,cancelButton 的背景颜色为红色,cancelText 的文本颜色为白色,confirmButton 的背景颜色为绿色,confirmText 的文本颜色为白色。
请根据您的需求自行调整颜色值。
原文地址: http://www.cveoy.top/t/topic/i5yg 著作权归作者所有。请勿转载和采集!