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

Posted 2023-02-25

【中文标题】反应本机选择器未在android上显示

【英文标题】：React native picker not showing on android

【发布时间】：2017-06-11 07:28: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'
    ,
);

【参考方案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>