選擇器不響應iOS React Native

Question

我有這個自定義選擇器組件，在Android中使用時可以很好地響應，但是在IOS中，它是第一個選擇上的“固定”組件，當按下它時，不會彈出對話框，也不會執行任何操作。 它與具有某些“有趣”樣式的文本元素沒有什么不同，哈哈。 這是組件代碼：

import React from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native';

export class GeneralPicker extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedValue: "",
        };
     }
  render() {
    return(
        <View style={styles.outerContainer}>
            <Text style={styles.labelText}>{this.props.labelText}</Text>
            <Picker prompt='Select' selectedValue={this.state.selectedValue} onValueChange={(itemValue, itemIndex) => this.setState({selectedValue: itemValue})} itemStyle={styles.items} style={styles.inputStyles}>
                <Picker.Item label={this.props.placeholderLabel} value='' />
                <Picker.Item label='Friend' value='friend' />
                <Picker.Item label='Family' value='family' />
                <Picker.Item label='Co Worker' value='coworker' />
            </Picker>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    outerContainer: {
        width: '90%',
        marginBottom: 20,
    },
    labelText: {
        fontFamily: 'rubik-bold',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#fff',
        marginBottom: 5,
    },
    inputStyles: {
        height: 40,
        borderRadius: 2,
        backgroundColor: 'rgba(255, 255, 255, 0.3);',
        width: '100%',
    },
    items: {
        fontSize: 14,
        color: '#fff',
        fontFamily: 'rubik-bold',
        borderRadius: 2,
        height: 40,
    },
});

同樣，由於某種原因，它可以在Android上運行，但不能在IOS上運行。 我以前沒有在單個項目上設置邊界高度，這使它在IOS中顯示所有異常，因此當我在邊界高度上顯示時，不再出現異常的顯示，但是選擇器沒有響應。 當我說奇怪的顯示時，我的意思是顯示的選擇器沒有在“選擇器內部”有任何項目，所有項目的透明度都低於選擇器下方約50像素，並且可以滾動，但從未選擇。

所以我想我的問題是... 為什么此選擇器代碼在Android上有效，但在IOS上無效？

Answer 1

是的，Picker 1僅適用於Android。 需要為IOS進行更改

import React from 'react'
import {
  Modal,
  TouchableWithoutFeedback,
  Text,
  StyleSheet,
  Platform,
  View,
  Picker,
  TextInput,
  TouchableOpacity
} from 'react-native';

class DropDown extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    modalVisible: false,
  };
}
render() {
  if (Platform.OS === 'android') {
    return (
    <Picker
      selectedValue={this.props.value}
      onValueChange={this.props.onValueChange}>
      {this.props.items.map((i, index) => (
        <Picker.Item key={index} label={i.label} value={i.value} />
      ))}
    </Picker>
  );
} else {
  const selectedItem = this.props.items.find(
    i => i.value === this.props.value
  );
  const selectedLabel = selectedItem ? selectedItem.label : '';
  return (
    <View style={styles.inputContainer}>
      <TouchableOpacity
        onPress={() => this.setState({ modalVisible: true })}>

        <TextInput
          pointerEvents="none"
          style={styles.input}
          editable={false}
          placeholder="Select language"
          onChangeText={searchString => {
            this.setState({ searchString });
          }}
          value={selectedLabel}
        />
      </TouchableOpacity>
      <Modal
        animationType="slide"
        transparent={true}
        visible={this.state.modalVisible}>
        <TouchableWithoutFeedback
          onPress={() => this.setState({ modalVisible: false })}>
          <View style={styles.modalContainer}>
            <View style={styles.buttonContainer}>
              <Text
                style={{ color: 'blue' }}
                onPress={() => this.setState({ modalVisible: false })}>
                Done
              </Text>
            </View>
            <View>
              <Picker
                selectedValue={this.props.value}
                onValueChange={this.props.onValueChange}>
                {this.props.items.map((i, index) => (
                  <Picker.Item
                    key={index}
                    label={i.label}
                    value={i.value}
                  />
                ))}
              </Picker>
            </View>
          </View>
        </TouchableWithoutFeedback>
      </Modal>
    </View>
  );
}
}
}

const styles = StyleSheet.create({
  container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
},
content: {
  marginLeft: 15,
  marginRight: 15,
  marginBottom: 5,
  alignSelf: 'stretch',
  justifyContent: 'center',
},
inputContainer: {
  borderBottomColor: 'gray',
  borderBottomWidth: 1
},
input: {
  height: 40,
  paddingLeft: 8
},
modalContainer: {
  position: 'absolute',
  bottom: 0,
  width: '100%',
  backgroundColor: '#fff',
},
buttonContainer: {
  justifyContent: 'flex-end',
  flexDirection: 'row',
  padding: 4,
  backgroundColor: '#fff',
},
});

export default DropDown