web-dev-qa-db-fra.com

Comment styler le sélecteur standard react-native Android?

Je suis incapable de le nommer. Il n’ya pratiquement aucune documentation à ce sujet. Je veux savoir comment paramétrer la fontFamily. Comment définir la couleur de fond sur le Picker.items?

https://facebook.github.io/react-native/docs/picker.html

La définition de fontFamily ou de la couleur d’arrière-plan ne fonctionne pas. l'envelopper dans une vue et attribuer des attributs de style à la vue ne fonctionne pas non plus.

<Picker
   style={styles.picker} // cannot set fontFamily here
   selectedValue={this.state.selected2}
   onValueChange={this.onValueChange.bind(this, 'selected2')}
   mode="dropdown">
   <Item label="hello" value="key0" /> // cannot set backgroundColor here
   <Item label="world" value="key1" />
</Picker>
androidreact-native
51
Abhishek Nalin

Il peut être appelé via Android natif. Voir this et this .

Ajoutez le code suivant à /res/values/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="Android:spinnerItemStyle">@style/SpinnerItem</item>
  <item name="Android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
</style>

<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="Android:fontFamily">sans-serif-light</item>
  <item name="Android:textSize">18dp</item>
</style>

<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="Android:textColor">#ffffff</item>
    <item name="Android:textSize">18dp</item>
    <item name="Android:fontFamily">sans-serif-light</item>
    <item name="Android:gravity">center</item>
    <item name="Android:background">@drawable/mydivider</item>
</style>

Créez un fichier à l'adresse res/drawable/mydivider.xml et ajoutez le code suivant

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <solid Android:color="#29A1C9" />
    <corners Android:radius="0.5dp" />
    <stroke
        Android:color="#FFFFFF"
        Android:width="0.1dp" />
</shape>

Avant de coiffer:

enter image description here

Après avoir coiffé: enter image description here

50
Abhishek Nalin

La question est peut-être ancienne, mais vous pouvez éventuellement l'utiliser pour styler la couleur: <Item label="blue" color="blue" value="blue" />

7
Arnaud Moret

Si vous jetez un oeil à la propriété style, c'est le style du sélecteur, pas les éléments du sélecteur.

Vous pouvez également voir dans la documentation que le sélecteur a itemStyle prop mais qu’il s’agit uniquement d’iOS. Styliser le Android Les éléments du sélecteur peuvent être effectués via un natif Android uniquement.

3
Mika Kuitunen