web-dev-qa-db-fra.com

Réagit Native Picker Styling - ANDROID

J'essaie d'ajouter un style au sélecteur réactif, comme le sous-jacent et le paramètre fictif, mais je ne peux pas le faire.

const styles = StyleSheet.create({
  picker: {
    textDecorationLine: 'underline'
  }
});

<Picker
   style={[styles.picker]}>
   <Picker.Item label="Country" value="" />
   <Picker.Item label="United States" value="US" />
   <Picker.Item label="India" value="IN" />
</Picker>
  1. Si j'utilise value = "", cela indique que le pays est une valeur sélectionnable, ce que je ne veux pas.
  2. textDecorationLine n'est pas en mesure de définir le style de soulignement sur le sélecteur.

En gros, je cherche à créer quelque chose comme ça,

 enter image description here

où, je peux également définir la couleur de l'espace réservé.

Merci à l'avance.

react-nativereact-native-android
6
Mohit Pandey

Le style de Picker and Picker est géré de manière native sur Android. Vous devez définir le style du SpinnerItem d'Android dans Android/app/src/res/styles.xml voir: Comment styler le sélecteur Android réactif natif?

J'ai essayé de tester le soulignement, mais je n'arrivais pas à trouver quoi que ce soit qui fonctionne. Voici quelques solutions de contournement Android spinner avec soulignement appcompat

Cependant, je voudrais simplement utiliser les composants réag natif à notre avantage. Je créerais un nouveau composant qui engloberait le sélecteur de React Native et le placerait dans une vue avec le style de soulignement qui rendrait un espace réservé si la valeur du sélecteur n'était pas définie.

9
Travis White

Vous devez modifier votre thème d'activité comme suit:

<!-- Base application theme. -->
<style name="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorAccent">@color/colorAccent</item>
    <item name="Android:spinnerStyle">@style/Base.Widget.AppCompat.Spinner.Underlined</item>
    ...
</style>

La colorAccent contrôle la couleur du soulignement et l'utilisation de @style/Base.Widget.AppCompat.Spinner.Underline fournit le soulignement sur votre Picker. 

Vous pouvez utiliser cette technique pour définir le style sur presque tous les composants Android de React. Android:editTextStyle, Android:textViewStyle, etc.

Malheureusement, étant donné que le sélecteur de réactions étend Spinner et non AppCompatSpinner, le style sera légèrement différent si vous utilisez une API <21.

1
chessdork

Ce morceau de code travaille sur ma machine:

           <View style={{borderBottomWidth:1, borderColor: 'rgb(204, 204, 
              204)',width: "28%"}}>
                    <Picker
                selectedValue={this.state.pickerValue}
                style={[styles.textInputBox]}
                onValueChange={this.onChange}>
                <Picker.Item label="+31" value="+31" />
                <Picker.Item label="+41" value="+41" />
                <Picker.Item label="+51" value="+51" />
                <Picker.Item label="+61" value="+61" />
                </Picker>
               </View>
0
kallayya

C'est le plus proche que je peux obtenir sur iOS: https://snack.expo.io/r1L7DGb1Z

Peu de choses à noter:

1) la propriété itemStyle permet de définir le style spécifique d'un élément de sélecteur unique

2) Pour obtenir la flèche vers le bas, vous devez l'imiter manuellement. Vous voudrez probablement attacher sa fonctionnalité avec TouchableHighlight (ce qui n'est pas le cas dans l'exemple).

3) Cela ne ressemble pas à Android, vous devrez probablement ajouter un style supplémentaire, spécifique à votre plate-forme.

0
zvona

Le problème ici est une hypothèse selon laquelle Picker possède les propriétés et le style de TextInput, ce qui n'est pas le cas. Il y a une question connexe ici: Avoir un paramètre fictif pour le sélecteur natif où un commentaire décrit ce dont vous aurez besoin pour rendre quelque chose de similaire au texte fictif.

Afin d'obtenir quelque chose comme textDecorationLine, vous pouvez appliquer un style borderBottomWidth au composant.

Pensez également à lier les accessoires selectedValue et onValueChange:

selectedValue={this.state.country} onValueChange={(country) => this.setState({country: country})}>
0
jaws