android 上未显示 React 本机选择器

Question

我正在尝试使用 Picker 组件，它在 iOS 中显示完美，但在 Android 中没有任何显示。我查看了关于的评论，但是设置 {width: 100} 和 {flex: 1} 似乎并不能解决问题。

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

我正在使用 Expo to 运行测试基于我的 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
    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

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

Answer 3

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

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

android 上未显示 React 本机选择器

React native picker not showing on android

react-native

react-native-android