反应本机选择器未在android上显示答案

【问题标题】：React native picker not showing on android反应本机选择器未在android上显示
【发布时间】：2026-01-29 23:35:01
【问题描述】：

我正在尝试使用 Picker 组件，它在 iOS 中显示非常好，但在 Android 中没有。我检查了 react native picker is not showing in android 上的 cmets，但是设置 {width: 100} 和 {flex: 1} 似乎并不能解决问题。

更新：选择器在那里，当我点击它所在的区域时工作，只是不可见。

我正在使用 Expo 在我的 iphone 和 android 上运行测试版本。 iphone上没问题。只是安卓... Galaxy S8 v7.0 Nougat

这是我的代码：

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

export default class Home extends React.Component {
    constructor(props){
        super(props);
            this.state = {
            selectedValue: 'Orange'
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Picker
                    style={styles.picker}
                    selectedValue={this.state.selectedValue}
                    onValueChange={(value) => {this.setState({selectedValue: value})}}
                    itemStyle={styles.pickerItem}
                >
                    <Picker.Item label="Apple" value="Apple" />
                    <Picker.Item label="Orange" value="Orange" />
                    <Picker.Item label="Banana" value="Banana" />
                    <Picker.Item label="Kiwi" value="Kiwi" />
                </Picker>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        justifyContent: 'center',
    },
    picker: {
        flex: 1,
    },
    pickerItem: {
        color: '#333333'
    },
});

【问题讨论】：

标签： react-native react-native-android

【解决方案1】：

尝试为 Picker 添加高度和宽度。尝试关注

<Picker
    style={{height:30, width:100}}
    selectedValue={this.state.selectedValue}
    onValueChange={(value) => {this.setState({selectedValue: value})}}
    itemStyle={styles.pickerItem}>
    <Picker.Item label="Apple" value="Apple" />
    <Picker.Item label="Orange" value="Orange" />
    <Picker.Item label="Banana" value="Banana" />
    <Picker.Item label="Kiwi" value="Kiwi" />
</Picker>

【讨论】：

嗨，谢谢，但似乎没有显示任何内容。我也尝试过更改 flex，创建一个有和没有 flex 的 <View></View> 包装器......哈哈，似乎没有任何效果。

【解决方案2】：

发现了问题，我导出了模块并将其导入到我的主要app.js 文件中，并在其中将模块包装在带有alignItems: 'center' 的容器中。显然这会导致选择器不显示。看到这个https://github.com/facebook/react-native/issues/6110

【讨论】：

【解决方案3】：

我遇到了同样的问题，原因是我将alignItems: 'center' 设置为父视图。这是我想要的，所以我没有删除它。相反，我通过将选择器的宽度设置为 100% 来解决它。

<View style={{alignItems: "center"}}>
    <Picker style={{width:"100%"}} mode="dropdown">
        <Picker.Item />
    </Picker>
</View>

【讨论】：