React 本机选择器未显示下拉菜单答案

【问题标题】：React native picker is not showing the dropdown menuReact 本机选择器未显示下拉菜单
【发布时间】：2021-04-05 16:16:56
【问题描述】：

我尝试在 react 中使用选择器创建下拉菜单，但选择器未显示在我的应用程序中。我试图添加一些我发现但没有运气的修复程序。我尝试添加宽度、弹性、更改 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;

【问题讨论】：

标签： reactjs react-native react-redux react-hooks

【解决方案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>

【讨论】：