web-dev-qa-db-ja.com

ReactネイティブiOSピッカーは常に開いています

画面に2つのピッカーがあります。 iOSアプリの画面に移動するたびに、ピッカーが常に開いており、すべてのオプションが表示されていることがわかります。

enter image description here

Androidではピッカーをクリックした後にのみオプションが表示されます。

誰かがiOSでこれを修正する解決策を提案できますか？

iosreact-nativepicker
22
Abhishek Nalin

IOSでは、ピッカーの代わりにActionSheetを使用します。 https://facebook.github.io/react-native/docs/actionsheetios.html

Jevakallioが答えたように、これはiOSのデフォルトの動作です。しかし、これは優れたUXを提供しないため、すべてのピッカーコンポーネントを削除し、ActionSheetに置き換えます。

私がやったし、それはうまく動作します。私がjevakallioによって提案された他のコンポーネントよりもActionSheetを好んだ理由は、RNチームによって開発されており、ネイティブ感が良いからです。 react-native-modal-picker が推奨される最後のオプションも非常に良いです。

enter image description here

14
Abhishek Nalin

これがiOSのUIPickerViewコンポーネントの動作方法です-カスタマイズする方法はありません。

別の種類のUI要素が必要な場合は、独自のUI要素を記述するか、次のような多くのオープンソースライブラリのいずれかを使用する必要があります。

これらのキーワードや類似のキーワードを使用してグーグル検索を行うと、他の多くのライブラリも生成されます。

11
jevakallio

React-native-modal-pickerは廃止されました。 react-native-modal-selector

6
Luan Felipe Costa

ActionSheetで回答を承認済みの回答として選択する理由がわかりません。ただし、この問題の回避策を示します。

あなたの州にこの値を入れてください：

this.state= {
    pickerOpacity: 0,
    opacityOfOtherItems: 1 //THIS IS THE OPACITY OF ALL OTHER ITEMS, WHICH COLLIDES WITH YOUR PICKER.
    label: 'Firstvalue'
}

レンダリングメソッドで次の操作を行います。

{this.checkIfIOS()}
      <Picker
         selectedValue={this.state.selected}
         style={{ height: 50, alignSelf: 'center', opacity: this.state.pickerOpacity, marginBottom:30, width: 250}}
         onValueChange={(itemValue, itemIndex) =>{
            this.setState({
                selected: itemValue,
                label: itemValue
            });
            toggle();
            }
          }>
          <Picker.Item label="Your Label" value="yourValue"/>
      </Picker>

そこで、クライアントがAndroidまたはiosであるかどうかを確認する必要があります。したがって、プラットフォームをインポートし、コードにcheckIfIos（）-Methodを追加します。

import {Platform} from 'react-native'

checkIfIOS(){
        if(Platform.OS === 'ios'){ // check if ios
            console.log("IOS!!!");
            //this button will (onpress) set our picker visible
            return (<Button buttonStyle={{backgroundColor:'#D1D1D1', opacity: this.state.opacityOfOtherItems}} onPress={this.toggle()} color="#101010" title={this.state.label} onPress={this.changeOpacity}/>); 
        }else if(Platform.OS === 'Android'){ //check if Android
            this.setState({
                pickerOpacity: 1 //set picker opacity:1 -> picker is visible.
            });
            console.log("Android!!!");
        }
    }

toggle(){
    if(Platform.OS === 'ios'){

        if(this.state.pickerOpacity == 0){
            this.setState({
                pickerOpacity: 1,
                opacityOfOtherItems: 0 // THIS WILL HIDE YOUR BUTTON!
            });
         }else{
             this.setState({
                 pickerOpacity: 0,
                 opacityOfOtherItems: 1
             });
          }
     }
}
1
Sercan Samet Savran