如何修改基于本机的日期选择器的背景?

时间:2019-11-02 09:29:53

标签: react-native datepicker native-base ios-darkmode

在iOS暗模式下,日期选择器似乎有一个通用问题(不特定于本机)。

为了解决该问题,我想设置模式的背景色。但是我不知道是否有可能...

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { DatePicker } from 'native-base';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { chosenDate: new Date() };

    this.setDate = this.setDate.bind(this);
  }
  setDate(newDate) {
    this.setState({ chosenDate: newDate });
  }
  render() {
    return (
      <View style={styles.container}>
        <Text />
        <Text />
        <Text />
        <DatePicker
          defaultDate={new Date(1976, 12, 23)}
          minimumDate={new Date(1940, 1, 1)}
          maximumDate={new Date(2040, 12, 31)}
          locale={'en'}
          timeZoneOffsetInMinutes={undefined}
          modalTransparent={false}
          animationType={'fade'}
          androidMode={'default'}
          placeHolderText="Select date"
          textStyle={{ color: 'green' }}
          placeHolderTextStyle={{ color: '#d3d3d3' }}
          onDateChange={this.setDate}
        />
        <Text>Date: {this.state.chosenDate.toString().substr(4, 12)}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

该代码是作为Expo Expo here的小吃,要体验该问题,您可以尝试使用iOS暗模式和亮模式。

1 个答案:

答案 0 :(得分:0)

您可以通过自定义主题变量来做到这一点。

作为参考,请参见这些链接

https://docs.nativebase.io/docs/ThemeVariables.html

https://docs.nativebase.io/Customize.html#theme-and-variables-headref