我的屏幕上有两个选择器。每当我导航到 iOS 应用程序的屏幕时，我发现选择器始终处于打开状态，并且所有选项都可见。
它在 Android 中运行得非常好，只有在我们单击选择器后才能看到选项。
有人可以建议在 iOS 中解决此问题的解决方案吗？
【问题讨论】：
标签： ios react-native picker
在 iOS 上使用 ActionSheet 而不是 Picker。 https://facebook.github.io/react-native/docs/actionsheetios
正如 jevakallio 所回答的，这是 iOS 上的默认行为。但这并不能提供良好的用户体验，因此请移除所有选择器组件并替换为 ActionSheet。
我做到了，而且效果很好。我之所以喜欢 ActionSheet 而不是 jevakallio 建议的其他组件，是因为它是由 RN 团队开发的，并且具有良好的原生感觉。建议的最后一个选项react-native-modal-picker也很好。
【讨论】：
这就是 iOS UIPickerView 组件的工作原理 - 无法自定义它。
如果您想要不同类型的 UI 元素，您需要自己编写，或使用众多开源库之一，例如：
使用这些以及类似的关键字进行谷歌搜索也会产生许多其他库。
【讨论】：
我不知道您为什么选择带有 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。因此导入 Platform 并将 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
});
}
}
}
编辑： iOS 屏幕截图 (Click here for Video)
【讨论】：
React-native-modal-picker 已停止使用。 react-native-modal-selector
【讨论】：
扩展ActionSheetIOS 答案，我创建了一个自定义组件，它是Picker 的直接替代品（我正在使用https://react-native-elements.github.io/react-native-elements/docs/overview.html 中的Button）：
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} />
);
}
}
}
【讨论】：
<View> 中，并在其上设置了 style 属性。 react-native-elements 按钮上的样式未应用。
<View> 中，并将其发布到 Gist：gist.github.com/thargenediad/7615e281baab25733ca0e7f5c7cb97d6 我希望它有所帮助有人可以节省尝试设置 Kevin 组件样式的时间。享受吧！
react-native-dropdown 有参考错误 如果您不想使用操作表而是一个“真正的”选择器，我发现这个更好......
【讨论】：
使用
<Picker itemStyle={{height:50}} > </Picker>
它只影响 ios 选择器。将选择器 itemstyle 高度更改为您的标准。
【讨论】：
从native-base 库而不是react-native 导入
【讨论】：
native-base 这样的第三方库不是我们正在寻找的