web-dev-qa-db-ja.com

デフォルトを変更React Native <Picker>ドロップダウン矢印アイコン

特に色を変更したい：

<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
14
John Mizanean Haimo

Androidでニンジンアイコン（ドロップダウン）の色を変更する場合は、styles.xmlに次の行を追加してみてください。

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

次のようになります。

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

完了したら、ネイティブファイルに加えられた変更がホットリロードされないため、アプリを再構築します。

4
marley89

考えられる解決策の1つは、既存の矢印を、ピッカーコンテナの残りの部分と一致する背景色を持つビュー内にラップされた絶対配置のベクトルアイコンでオーバーレイすることです。 Picker矢印は、デフォルトではPicker.Item値の長さに基づいてそれ自体を再配置しないため、これは通常うまく機能します。

An orange button

3
Friendly-Robot

これを試して...

<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>
2
sk sakil

IOSのネイティブコンポーネントを変更することはできません。React Native、構成可能なものとして文書化されているものを超えています。Appleは、ネイティブの使用iOSユーザーに使い慣れた一貫したエクスペリエンスを提供する要素。

以前、選択したアイテムの周りの行を変更または削除しようとして失敗しました。 ReactネイティブおよびJavaScriptのみを使用することはできません。Objective-CまたはSwiftを作成する場合は、ネイティブコンポーネントを拡張し、構成可能なAPIをReactコンポーネントに公開できるPOD統合を作成します。

私にとってこれは大変な作業であり、私は最初から独自のjs実装を書くことになりました。

2
Jonathan Miles

プレビューRNPicker Android with RNVectorIcon with overlay icon 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

それは簡単なものではありませんが、私は解決策を見つけました。最初に、デフォルトのドロップダウンを無効にするために背景色をピッカーに追加してから、ドロップダウンアイコンを追加して配置しました。そして、それは私にとって完璧に機能します。以下にコード例を示します。

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

そしてここに私が使用するスタイルがあります

 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