Question

我尝试使用Picker组件，它在iOS中表现得非常好，但在Android中却没有。我已经检查了react native picker is not showing in android上的评论，但设置{width: 100}和{flex: 1}似乎无法解决问题。

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

我使用Expo在iphone和android上运行测试版本。在iPhone上没问题。只是android ... 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'
    },
});

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

发现问题后，我导出了模块并将其导入我的主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>

React本机选择器没有在android上显示

3 个答案: