2016-08-12 4 views
28

Ich kann es nicht stylen. Dazu gibt es kaum Unterlagen. Ich möchte wissen, wie man fontFamily setzt. Wie stelle ich die Hintergrundfarbe für die Picker.items ein?Wie style die Standard-Reaktion-native Android-Picker?

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

Einstellung family oder Hintergrundfarbe funktioniert nicht. es in eine Ansicht zu wickeln und Style-Attribute zu View zu geben, funktioniert auch nicht.

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

Warum die downvote? Ich spreche über die Standard-Picker-Komponente, wenn das die Verwirrung ist. –

Antwort

26

Es kann über native Android gestylt werden. Siehe this und this.

Fügen Sie den folgenden Code

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

Erstellen Sie eine Datei in res/ziehbar/mydivider.xml und fügen Sie den folgenden Code

/res/values/styles.xml
<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> 

Vor dem Styling:

enter image description here

Nach Styling: enter image description here

+1

Wie werden Sie den weißen Hintergrund am oberen und unteren Rand des Rechtecks ​​loswerden? – Ozzy

+0

Ich habe versucht, aber konnte nicht so ich habe es verlassen, wie es ist. Sieht nicht so schlecht aus :) –

+0

Ich habe es geschafft zu arbeiten danke! Gibt es eine Möglichkeit, mehrere Stile zur Auswahl zu haben? Angenommen, die Schriftgröße soll in einer Auswahl in meiner App größer sein, aber die anderen sind alle gleich. Gibt es eine Möglichkeit, eine Art von Attribut im JavaScript-Code zu setzen, die ich verwenden könnte, um die Stile aus dem nativen Android Xml zu wechseln? –

3

Wenn Sie einen Blick auf die style Stütze nehmen, es ist der Stil für den Picker, nicht die Picker Artikel.

Sie können auch aus der Dokumentation sehen, dass der Picker itemStyle Prop hat, aber es ist nur iOS. Sie können die Android Picker-Elemente nicht stylen.

+0

Ich postete dies als ein Problem auf Github und bekam eine Antwort, dass es über native Android-Programmierung getan werden kann. Wenn Sie wissen, wie man das macht, können Sie das bitte beantworten [Frage] (http://stackoverflow.com/questions/38976064/how-to-style-the-react-native-picker-using-android-styles-xml) ? –

5

Die Frage könnte alt sein, aber für den Fall, können Sie dies die Farbe, Stil verwenden: <Item label="blue" color="blue" value="blue" />

+0

was ist mit 'hintergrund? –