為什么 React Native Picker 在我的 Android 模擬器中不起作用？

Question

我的應用中有一個 React Native Picker（下拉菜單）。 當我在我的 Android 模擬器/模擬器中單擊它時，下拉菜單將不起作用； 什么都沒發生。 此外，在 Android 模擬器/仿真器中，樣式不起作用（邊框不顯示）。

當我嘗試單擊 Web 瀏覽器模擬器/模擬器中的下拉菜單時，它確實按預期工作。 此外，Web 模擬器/模擬器中的樣式對於下拉菜單是正確的，但 Web 瀏覽器模擬器/模擬器上其他所有內容的樣式都搞砸了。

這是我的代碼：

import React, { useState } from "react";
import { StyleSheet, Picker, View } from "react-native";

const AppointmentPicker = (props) => {
  console.log(props.placeholder);
  const [selectedValue, setSelectedValue] = useState("Location (required)");

  return (
    <Picker
      style={styles.defaultPicker}
      selectedValue={selectedValue}
      onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
    >
      <Picker.Item label="Location (required)" value="no-location" />
      <Picker.Item label="Dothan" value="dothan" />
      <Picker.Item label="Dothan Subspecialty" value="dothan-subspecialty" />
      <Picker.Item label="Enterprise" value="enterprise" />
      <Picker.Item label="Eufaula" value="eufaula" />
      <Picker.Item label="Ozark" value="ozark" />
    </Picker>
  );
};

const styles = StyleSheet.create({
  defaultPicker: {
    width: "100%",
    height: 50,
    borderWidth: 1,
    borderRadius: 5,
    borderColor: "#DDDDDD",
    marginBottom: 20,
    paddingLeft: 15,
  },
});

export default AppointmentPicker;

我的代碼正確嗎？ 是我的代碼有問題還是 Android 仿真器無法正常工作？

我正在使用 Android Studio 模擬器/模擬器。 我也在使用 Expo。

Answer 1

我想您需要將選擇器放在 View 容器或 backgroundView

    <View style={flex:1, padding: 0, margin: 0}>
     <Picker
      style={styles.defaultPicker}
      selectedValue={selectedValue}
      onValueChange={(itemValue, itemIndex) => 
              setSelectedValue(itemValue)}
      >
      <Picker.Item label="Location (required)" value="no- 
       location"/>
      <Picker.Item label="Dothan" value="dothan" />
      <Picker.Item label="Dothan Subspecialty" value="dothan- 
       subspecialty" />
      <Picker.Item label="Enterprise" value="enterprise" />
      <Picker.Item label="Eufaula" value="eufaula" />
      <Picker.Item label="Ozark" value="ozark" />
    </Picker>
    </View>

如果這不起作用，可以嘗試取出 styles 上的高度或者您可以嘗試使用https 中的選擇器：//github.com/react-native-community/react-native-picker