2
votes

iOS DatePicker ne s'affiche pas dans React Native

Je ne vois pas mon DatePicker sur iOS. Le modal est ouvert, mais il n'y a rien de visible, et quand je déplace le DatePicker à l'intérieur du modal, la date change donc je sais que cela fonctionne. C'est juste invisible et je ne sais pas pourquoi.

Pouvez-vous m'aider?

Merci

type Props = {
  date: Date,
  updateDate: Function
}

type State = {

}

export class DatePickerComponent extends React.Component<Props, State> {
  constructor(Props: Object) {
    super(Props);
  }

  render() {
    return (
      <DatePicker 
        cancelBtnText="Annuler"
        confirmBtnText="Valider"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 5,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 45
          }
        }}
        date={this.props.date}
        format="DD-MM-YYYY"
        iconSource={require("../../assets/Birthday.png")}
        locale="fr"
        onDateChange={(date) => this.props.updateDate(date)}
        style={{width: "60%", marginTop: 15}}
      />
    );
  }
}

reactjs react-native datepicker

0 commentaires

3 Réponses :

0
votes

C'est un bogue dans DatePickerIOS, qui se produit lorsque votre téléphone est en mode sombre, voir https://github.com/xgfe/react-native-datepicker/issues/365

Pour contourner le problème, vous pouvez installer le module d' react-native-appearance , vérifier si le mode sombre est actif et ajuster le style de DatePicker:

const colorScheme = Appearance.getColorScheme();

<DatePicker
  ...
  customStyles={{
    datePicker: {
      backgroundColor: colorScheme === "dark" ? "#222" : "white"
    }
  }}
/>

0 commentaires

3
votes

1.Ouvrez Info.plist. 2.Ajoutez-les:

  <key>UIUserInterfaceStyle</key>
  <string>Light</string>

0 commentaires

0
votes

J'ai eu le même problème et j'ai trouvé l'explication dans la documentation sous style ( ici ):

Veuillez noter que par défaut, la couleur du texte du sélecteur est contrôlée par le thème de l'application (mode clair / sombre). En mode sombre, le texte est blanc et en mode clair, le texte est noir.
Cela signifie que par exemple. si le mode sombre de l'appareil est activé et que la couleur d'arrière-plan de votre écran est blanche, vous ne verrez pas le sélecteur.

Il y a deux façons de le résoudre ...

Désactivez complètement le mode sombre en ajoutant ce qui suit à info.plist:

<DatePicker
  ...
  textColor: "#000"
/>

Utilisez l'accessoire textColor . par exemple:

<key>UIUserInterfaceStyle</key>
<string>Light</string>

0 commentaires