React Native ios picker всегда открыт

У меня есть два сборщика на моем экране. Всякий раз, когда я перехожу к экрану в приложении iOS, я обнаруживаю, что сборщики всегда открыты и все параметры видны.

enter image description here

Он отлично работает в Android, где параметры видны только после того, как мы нажмем на сборщик.

Может кто-нибудь предложить решение исправить это в iOS?

ОТВЕТЫ

Ответ 1

Используйте ActionSheet вместо Picker на iOS. https://facebook.github.io/react-native/docs/actionsheetios.html

Как ответил jevakallio, это поведение по умолчанию для iOS. Но это не дает хорошего UX, поэтому удалите все компоненты сборщика и замените ActionSheet.

Я сделал, и он отлично работает. Причина, по которой я предпочитаю ActionSheet над другими компонентами, предложенными jevakallio, потому что он разработан командой RN и имеет хорошее родственное чувство. Последний вариант, предложенный response-native-modal-picker, тоже очень хорош.

enter image description here

Ответ 2

Это то, как работает компонент iOS UIPickerView - нет способа настроить его.

Если вы хотите использовать другой элемент пользовательского интерфейса, вам нужно написать свой собственный или использовать одну из многих библиотек с открытым исходным кодом, например:

Googling с этими и подобными ключевыми словами дает много других библиотек.

Ответ 4

Я не знаю, почему вы выбрали ответ с помощью 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>

Итак, теперь мы должны проверить, является ли наш клиент андроидом или 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
             });
          }
     }
}