React本机ios选择器始终处于打开状态

我的屏幕上有两个选择器。每当我在iOS应用程序中导航到屏幕时，我发现选择器总是打开的，所有选项都可见

它在Android中工作得非常好，只有在点击选择器后，选项才可见

---

有人能提出一个解决方案来在iOS中解决这个问题吗？

这正是iOS

UIPickerView

组件的工作原理-无法自定义它

如果需要不同类型的UI元素，则需要编写自己的UI元素，或者使用许多开放源代码库中的一个，例如：

---

用谷歌搜索这些关键词和类似的关键词，也会产生许多其他库。

在iOS上使用ActionSheet而不是Picker。

正如jevakallio所回答的，这是iOS上的默认行为。但这并不能提供一个好的用户体验，所以请删除所有选择器组件并替换为操作表

我做到了，效果很好。与jevakallio建议的其他组件相比，我更喜欢ActionSheet的原因是，它是由RN团队开发的，具有良好的本土感觉。建议的最后一个选项也很好

---

React本机模式选择器已停止。

---

我不知道你为什么选择行动表上的答案作为接受答案。 但是，我将提供解决此问题的方法：

将这些值放入您的状态：

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>

{this.checkIfIOS（）}
{
这是我的国家({
选定项：itemValue，
标签：itemValue
});
切换（）；
}
}>

现在我们要检查一下，我们的客户端是安卓还是ios。因此，请导入平台并将checkIfIos（）方法放入代码中：

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
             });
          }
     }
}

从'react native'导入{Platform}
checkIfIOS（）{
if（Platform.OS==='ios'）{//检查ios
log（“IOS！！！”）；
//此按钮将（按下）设置我们的选择器可见
返回（）；
}else if（Platform.OS==='android'）{//检查android
这是我的国家({
选取器容量：1//设置选取器不透明度：1->选取器可见。
});
log（“ANDROID！！！”）；
}
}
切换（）{
如果（Platform.OS==='ios'）{
if（this.state.pickerOpacity==0）{
这是我的国家({
挑选能力：1，
opacityOfOtherItems:0//这将隐藏您的按钮！
});
}否则{
这是我的国家({
拾取能力：0，
乳浊症：1
});
}
}
}

编辑：iOS屏幕截图（）

---

扩展了

ActionSheetIOS

答案，我创建了一个自定义组件，它是

选择器的替代品（我使用的是来自的
按钮）：

从“React”导入React；
从“react native”导入{ActionSheetIOS，Platform}；
从“react native elements”导入{Button}；
类PickerDropDown扩展了React.Component{
洋葱钮扣=（）=>{
让选项=this.props.children.map（（项目，i）=>{
返回item.props.label；
});
选项。推送（“取消”）；
ActionSheetIOS.showActionSheetWithOptions(
{
选项：选项，
cancelButtonIndex:options.length-1，
},
这是洋葱按钮
);
}
OnisButtonPick=（buttonIndex）=>{
if（buttonIndex{
for（设i=0；i{
for（设i=0；i0）{
if（this.props.selectedValue的类型！==“未定义”）{
title=this.findLabelForValue（this.props.selectedValue）；
}否则{
title=this.props.children[0].props.label；
}
}
返回(
);
}否则{
返回(
);
}
}
}
从
本机库导入，而不是从
react native
react native下拉列表导入有引用错误
如果你不想使用行动表，而是一个“真正的”挑选者，我发现这个更好

使用


它只影响ios选择器。将选取器项目样式高度更改为您的标准。
操作表不应保留用于操作？您也可以使用。它不会给一个本地的采摘者，但会在两个平台上给人一种一致的感觉。你有没有这种世博点心？我很难实现这一点，我甚至不确定它是否有效。不幸的是没有。在呈现选择器之前，只需放置toggle（）&checkIfOs（）方法并运行checkIfOs，然后在选择器onValueChange事件中使用toggle（）方法。如果您可以提供视图，可以帮助您如何实现它。@SercanSametSavran您可以提供选择器的屏幕截图吗？该按钮在视图中的外观如何？这个.changeOpacity（）的实现似乎丢失了。您能在IOS上为我们提供一个屏幕截图吗？这是目前为止最好的解决方案，应该是公认的答案。有用。但是使用act
import React from 'react';
import { ActionSheetIOS, Platform } from 'react-native';
import { Button } from 'react-native-elements';

class PickerDropDown extends React.Component {
  onIOSButton = () => {
    let options = this.props.children.map((item, i) => {
      return item.props.label;
    });
    options.push("Cancel");
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: options,
        cancelButtonIndex: options.length - 1,
      },
      this.onIOSButtonPick
    );
  }

  onIOSButtonPick = (buttonIndex) => {
    if (buttonIndex < this.props.children.length && buttonIndex != this.props.selectedValue) {
      if (typeof this.props.selectedValue === 'undefined' || (typeof this.props.selectedValue !== 'undefined' && buttonIndex != this.findIndexForValue(this.props.selectedValue))) {
        this.props.onValueChange(this.props.children[buttonIndex].props.value, buttonIndex);
      }
    }
  }

  findLabelForValue = (searchValue) => {
    for (let i = 0; i < this.props.children.length; i++) {
      if (this.props.children[i].props.value == searchValue) {
        return this.props.children[i].props.label;
      }
    }
    return null;
  }

  findIndexForValue = (searchValue) => {
    for (let i = 0; i < this.props.children.length; i++) {
      if (this.props.children[i].props.value == searchValue) {
        return i;
      }
    }
    return -1;
  }

  render() {
    if (Platform.OS === "ios") {
      let title = "";
      if (this.props.children && this.props.children.length > 0) {
        if (typeof this.props.selectedValue !== 'undefined') {
          title = this.findLabelForValue(this.props.selectedValue);
        } else {
          title = this.props.children[0].props.label;
        }
      }
      return (
      <View>
        <Button
          title={title}
          onPress={this.onIOSButton}
          type="clear"
          icon={{
            name: "arrow-drop-down",
            size: 15,
            color: "black"
          }}
          iconRight={true}
        />
     </View>
      );
    } else {
      return (
        <Picker {...this.props} />
      );
    }
  }
}