要设置 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 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录