React Native ios 选择器始终打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41181683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Native ios picker is always open
提问by Abhishek Nalin
I have two pickers on my screen. Whenever I navigate to the screen in iOS app I find that the pickers are always open and all options are visible.
我的屏幕上有两个选择器。每当我导航到 iOS 应用程序的屏幕时，我发现选择器始终处于打开状态并且所有选项都可见。
It works perfectly fine in Android where the options are visible only after we click on the picker.
它在 Android 中运行良好，只有在我们单击选择器后才能看到选项。
Can somebody suggest a solution to fix this in iOS?
有人可以建议一个解决方案来在 iOS 中解决这个问题吗？
采纳答案by Abhishek Nalin
Use ActionSheet instead of Picker on iOS. https://facebook.github.io/react-native/docs/actionsheetios.html
在 iOS 上使用 ActionSheet 而不是 Picker。 https://facebook.github.io/react-native/docs/actionsheetios.html
As answered by jevakallio this is the default behaviour on iOS. But this doesn't give a good UX so remove all picker components and replace with ActionSheet.
正如 jevakallio 所回答的，这是 iOS 上的默认行为。但这并不能提供良好的用户体验，因此删除所有选择器组件并替换为 ActionSheet。
I did and it works great. The reason I prefered ActionSheet over other components suggested by jevakallio because it is developed by the RN team and has a good native feeling. The last option suggested react-native-modal-pickeris also very good.
我做到了，效果很好。我之所以更喜欢 ActionSheet 而不是 jevakallio 建议的其他组件，因为它是由 RN 团队开发的，具有很好的原生感。最后一个选项建议react-native-modal-picker也很好。
回答by jevakallio
That's just how the iOS UIPickerViewcomponent works - there's no way to customize it.
这就是 iOSUIPickerView组件的工作方式 - 无法对其进行自定义。
If you want a different kind of UI element, you'll need to write your own, or use one of the many open source libraries, such as:
如果您想要不同类型的 UI 元素，您需要自己编写，或使用许多开源库之一，例如：
Googling with these, and similar keywords, yields many other libraries as well.
使用这些和类似的关键字进行谷歌搜索，也会产生许多其他库。
回答by Luan Felipe Costa
React-native-modal-picker was discontinued. react-native-modal-selector
React-native-modal-picker 已停止使用。 反应原生模式选择器
回答by Sercan Samet Savran
I don't know why you'd choose the answer with ActionSheet as accepted answer. However I'll give a workaround for this problem:
我不知道您为什么选择 ActionSheet 作为已接受的答案。不过我会针对这个问题给出一个解决方法：
Put this values in your state:
将此值放在您的状态中：
this.state= {
pickerOpacity: 0,
opacityOfOtherItems: 1 //THIS IS THE OPACITY OF ALL OTHER ITEMS, WHICH COLLIDES WITH YOUR PICKER.
label: 'Firstvalue'
}
In your render method do following:
在您的渲染方法中执行以下操作：
{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>
So now we've to check, whether our client is android or ios. Therefore import Platform and put the checkIfIos()-Method in your code:
所以现在我们要检查一下，我们的客户端是 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
});
}
}
}
EDIT:Screenshot with iOS (Click here for Video)
编辑：iOS 截图（点击此处观看视频）
回答by Kevin
Extending the ActionSheetIOSanswer, I created a custom component that is a drop-in replacement for Picker(I'm using Buttonfrom https://react-native-elements.github.io/react-native-elements/docs/overview.html):
扩展ActionSheetIOS答案，我创建了一个自定义组件，它是Picker（我Button从https://react-native-elements.github.io/react-native-elements/docs/overview.html使用）的替代品：
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} />
);
}
}
}
回答by Harshal P
import from native-baselibrary instead of react-native
从native-base库导入而不是react-native
