wake-up-neo.com

Ändern Sie das standardmäßige Drop-Down-Pfeilsymbol "React Native"

Ich möchte die Farbe spezifisch ändern:

<Picker selectedValue={this.state.selected}
        onValueChange={(value) => this.setState({selected:value})}  >
  {data.map ((value)=><Picker.Item label={value} value={value} key={value}/>)}
</Picker>
13

Versuche dies...

<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

Es ist nicht möglich, die nativen iOS-Komponenten über React Native hinaus zu ändern, was als konfigurierbar dokumentiert ist. Apple ist sehr zuversichtlich, dass seine nativen Elemente verwendet werden, die iOS-Benutzern ein vertrautes und konsistentes Erlebnis bieten.

Ich habe zuvor erfolglos versucht, die Zeilen um das ausgewählte Element zu ändern oder zu entfernen. Nur React Native und JavaScript können nicht verwendet werden. Wenn Sie Objective-C oder Swift schreiben möchten, kann die native Komponente möglicherweise erweitert und eine POD-Integration erstellt werden, die eine konfigurierbare API für die React-Komponente verfügbar macht.

Für mich war das zu viel Arbeit und ich habe meine eigene js-Implementierung von Grund auf neu geschrieben.

2
Jonathan Miles

Für diejenigen, die die Farbe des Möhrensymbols (Dropdown) in Android ändern möchten, können Sie versuchen, der Styles.xml die folgende Zeile hinzuzufügen:

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

Sollte so aussehen:

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

Wenn Sie fertig sind, erstellen Sie die App neu, da Änderungen, die an nativen Dateien vorgenommen wurden, nicht erneut geladen werden.

1
marley89

Eine mögliche Lösung besteht darin, den vorhandenen Pfeil mit einem absolut positionierten Vektorsymbol zu überlagern, das in eine Ansicht eingebettet ist, deren Hintergrundfarbe mit dem restlichen Picker-Container übereinstimmt. Dies funktioniert in der Regel gut, da der Picker-Pfeil sich standardmäßig nicht selbst basierend auf der Länge des Picker.Item-Werts neu positioniert.

 An orange button

1
Friendly-Robot

vorschau RNPicker Android mit RNVectorIcon mit Overlay-Symbol 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

Ich habe eine Lösung gefunden, obwohl sie nicht einfach ist. Zuerst habe ich der Auswahl eine Hintergrundfarbe hinzugefügt, um das Standard-Dropdown-Menü zu deaktivieren. Dann habe ich ein Dropdown-Symbol hinzugefügt und es positioniert. Und es funktioniert perfekt für mich. Hier ist das Codebeispiel.

    <View style={Style.pickerWrapper}>
      <Icon
        name="arrow-drop-down"
        type="MaterialIcons"
        style={Style.pickerIcon}
      />
      <Picker
        mode="dropdown"
        style={fieldtypeStyle.pickerContent}
        placeholder="Select your SIM"
        placeholderStyle={{ color: #E2E2E2 }}
        placeholderIconColor={#E2E2E2}
        selectedValue={this.state.selected2}
        onValueChange={this.onValueChange2.bind(this)}
      >
        <Picker.Item label="Wallet" value="key0" />
        <Picker.Item label="ATM Card" value="key1" />
        <Picker.Item label="Debit Card" value="key2" />
        <Picker.Item label="Credit Card" value="key3" />
      </Picker>
    </View>

Und hier sind die Stile, die ich benutze

 pickerWrapper: {
    borderColor: blurColor,
    borderWidth: 1,
    backgroundColor: "#273137",
    borderRadius: 4
 },
 pickerIcon: {
    color: inputColor,
    position: "absolute",
    bottom: 15,
    right: 10,
    fontSize: 20
 },

 pickerContent: {
    color: inputColor,
    backgroundColor: "transparent",
 },
0
Rajesh Bhartia