web-dev-qa-db-fra.com

Modifier l'icône de flèche déroulante React Native <Picker> par défaut

Je veux changer sa couleur spécifiquement:

<Picker selectedValue={this.state.selected}
        onValueChange={(value) => this.setState({selected:value})}  >
  {data.map ((value)=><Picker.Item label={value} value={value} key={value}/>)}
</Picker>
react-nativereact-native-androidpicker
13
John Mizanean Haimo

Essaye ça...

<Picker
  mode="dropdown"
  style={{backgroundColor: 'red'}}
  selectedValue={this.state.selected}
  onValueChange={(value) => this.setState({selected: lang})}>
  <Picker.Item label="Java" value="Java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>
3
sk sakil

Il n’est pas possible de modifier les composants natifs iOS, à l’aide de React Native, au-delà de ce qui est documenté comme étant configurable. Apple est très avisé sur l'utilisation de ses éléments natifs, ce qui offre aux utilisateurs iOS une expérience familière et cohérente.

J'ai déjà essayé sans succès de modifier ou de supprimer les lignes entourant l'élément sélectionné. Il n'est pas possible d'utiliser React Native et JavaScript uniquement. Si vous souhaitez écrire Objective-C ou Swift, vous pourrez peut-être étendre le composant natif et créer vous-même une intégration POD pouvant exposer une API configurable au composant React.

Pour moi, c'était trop de travail et j'ai fini par écrire ma propre implémentation en js.

2
Jonathan Miles

Pour ceux qui cherchent à changer la couleur de l'icône de la carotte (liste déroulante) dans Android, vous pouvez essayer d'ajouter la ligne suivante à votre style.xml

<item name="Android:colorControlNormal">#FFFFFF</item>

Devrait ressembler à ceci:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="Android:colorControlNormal">#FFFFFF</item>
    </style>
</resources>

Une fois cela fait, reconstruisez l'application car les modifications apportées aux fichiers natifs ne seront pas rechargées à chaud.

1
marley89

Une solution possible consiste à superposer à la flèche existante une icône de vecteur positionné de manière absolue, encapsulée dans une vue dont la couleur d'arrière-plan correspond au reste du conteneur Sélecteur. Cela fonctionne généralement bien car la flèche du sélecteur ne se repositionne pas par défaut en fonction de la longueur de la valeur Picker.Item.

 An orange button

1
Friendly-Robot

aperçu de RNPicker Android avec RNVectorIcon avec l’icône superposition https://i.stack.imgur.com/cJJTl.png

import React from 'react';
import { Picker, View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class _class extends React.Component {
    static Item = Picker.Item;

    render() {
        const autoWidth = 70 + ((this.props.selectedValue.length - 2) * 8);

        return (
            <View style={[
                { backgroundColor: '#ffffff20', padding: 8, paddingRight: 0, opacity: this.props.enabled ? 1 : .5 },
                this.props.viewstyle, this.props.and_viewstyle
            ]}>
                <Picker {...this.props} style={[{ width: autoWidth, height: 20 }, this.props.style, this.props.and_style]}>
                    {this.props.children}
                </Picker>
                <Icon
                    name='sort-down'
                    size={20}
                    color='white'
                    style={[{right: 18, top: 4, position: 'absolute'}]}
                />
            </View>
        );
    }
}

Android/app/src/main/res/values ​​/ styles.xml

<resources>

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

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

</resources>
0
Nicolas Sturm