反应本机选择器未显示在Android上

Question

我正在尝试使用Picker组件，它在iOS中显示完全正常，但在Android中却没有显示。我已经检查了关于react native picker的评论未在android中显示，但是设置{width: 100}和{flex: 1}似乎无法解决问题。

更新：拾纸器在那里，当我点击它所在的区域时可以使用，只是不可见。

我正在使用Expo在我的iPhone和Android上运行测试版本。在iPhone上没问题。只是Android ... Galaxy S8 v7.0牛轧糖

这是我的代码：

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'
    },
});

Answer 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>

Answer 2

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

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