web-dev-qa-db-fra.com

Style React Native Picker

J'essaie de styliser la couleur du texte des éléments dans un React sélecteur natif. Je ne travaille que sur iOS jusqu'à présent, mais si je pouvais trouver une solution multiplateforme qui ' d être génial.

J'ai essayé les choses suivantes:

Couleur de style sur Picker

<Picker style={{color:'white'}} ...etc >

Couleur de style sur les articles du sélecteur

<Picker.Item style={{color:'#fff'}} label={'Toronto'} value={'Toronto'} />

J'ai également vu quelques exemples d'ajout d'une propriété de couleur, j'ai donc essayé

<Picker.Item color='white' label={'Toronto'} value={'Toronto'} />

À perte totale ici. Merci pour tout aperçu!

EDIT: Voici une solution - utilisez l'accessoire itemStyle dans l'élément Picker. Je pense que c'est uniquement iOS.

<Picker itemStyle={{color:'white'}} >
      <Picker.Item color='white' label={'Toronto'} value={'Toronto'} />
      <Picker.Item  label={'Calgary'} value={'Calgary'} />
</Picker>
javascriptandroidiosreactjsreact-native
15
n8e

Pour changer la couleur, vous devez utiliser ceci:

<Item label="blue" color="blue" value="blue" />
10
Arnaud Moret

Pour changer la couleur du texte, la couleur d'arrière-plan, la taille de la police et d'autres éléments divers comme la marge et le remplissage, vous pouvez utiliser "itemStyle" comme ci-dessous:

            <Picker
                selectedValue={this.state.selectedItem}
                style={{ height: 100, width: 200 }}
                onValueChange={this.onChangeItem}
                itemStyle={{ backgroundColor: "grey", color: "blue", fontFamily:"Ebrima", fontSize:17 }}
                >
                {cityItems}
            </Picker>

Bon codage :)

5
Jigaroza287

Vous devriez essayer backgroundColor au lieu de color: https://facebook.github.io/react-native/docs/view.html#style

1
Peter Gelderbloem