62 votes

Comment le style de la norme de réaction-native android sélecteur?

Je suis incapable de style. Il y a très peu de documentation sur ce sujet. Je veux savoir comment définir la fontFamily. Comment définir la couleur d'arrière-plan sur le Sélecteur.articles?

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

Réglage fontFamily ou couleur d'arrière-plan ne fonctionne pas. l'emballant dans une vision et de donner des attributs de style pour Afficher aussi ne fonctionne pas.

<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>

72voto

Abhishek Nalin Points 1553

Il peut être appelée via android natif. Voir ce et ce.

Ajoutez le code suivant à l' /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éer un fichier à res/drawable/mydivider.xml et d'ajouter 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 les coiffer:

enter image description here

Après la coiffure:enter image description here

9voto

Arnaud Moret Points 382

La question est peut-être vieux, mais dans le cas, vous pouvez l'utiliser pour le style de la couleur: <Item label="blue" color="blue" value="blue" />

5voto

Mika Kuitunen Points 544

Si vous jetez un oeil à l' style prop, c'est le style pour le Sélecteur, pas le Sélecteur d'objets.

Vous pouvez aussi voir dans les docs que le Sélecteur a itemStyle prop, mais c'est seulement sur iOS. Le style de l'Android Sélecteur d'éléments peut être effectuée via native Android.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X