React 本機選擇器未顯示下拉菜單

Question

我嘗試在反應中使用選擇器制作下拉菜單，但選擇器未顯示在我的應用程序中。 我試圖添加一些我發現但沒有運氣的修復程序。 我嘗試添加寬度、彈性、更改 alignItem，但這些似乎都不起作用。 我必須提到我嘗試從 JSON 文件加載我的選擇器項目的事實。

這是我的選擇器代碼：

<Item picker>
          <Picker
            mode="dropdown"
            iosIcon={<Icon name="arrow-down" color={"#007aff"} />}
            style={{ width: undefined }}
            selectedValue={country}
            placeholder="Select your country"
            placeholderStyle={{ color: "#007aff" }}
            placeholderIconColor="#007aff"
            onValueChange={(e) => setCountry(e)}
          >
            {countries.map((c) => {
              return <Picker.Item key={c.code} label={c.name} value={c.name} />;
            })}
          </Picker>
        </Item>

這是我的表單容器，在另一個文件中全局聲明。

import React from 'react';
import { ScrollView, Dimensions, StyleSheet, Text } from 'react-native';

var { width } = Dimensions.get('window');

const FormContainer = (props) => {
    return (
        <ScrollView contentContainerStyle={styles.container}>
            <Text style={styles.title}>{props.title}</Text>
            {props.children}
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    container: {
        marginTop: 30,
        marginBottom: 400,
        width: width,
        justifyContent: 'center',
        alignItems: 'center'
    },
    title: {
        fontSize: 30,
    }
})

export default FormContainer;

Answer 1

我找到了一個解決方法，顯然如果我不同時應用高度和寬度，它將無法工作。

這是更新的代碼。

<Item picker>
      <Picker
        mode="dropdown"
        iosIcon={<Icon name="arrow-down" color={"#007aff"} />}
        style={{  height: 50, width: 150 }}
        selectedValue={country}
        placeholder="Select your country"
        placeholderStyle={{ color: "#007aff" }}
        placeholderIconColor="#007aff"
        onValueChange={(e) => setCountry(e)}
      >
        {countries.map((c) => {
          return <Picker.Item key={c.code} label={c.name} value={c.name} />;
        })}
      </Picker>
    </Item>