react-native - React native 选择器未在 Android 上显示

标签 react-native

我正在尝试使用 Picker 组件,它在 iOS 中显示完美,但在 Android 中没有显示。我查看了关于 react native picker is not showing in android 的评论但是设置 {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'
    },
});

最佳答案

尝试为 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>

关于react-native - React native 选择器未在 Android 上显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44481393/

相关文章:

reactjs - {React Native} Async\Await 无法与 setState 正常工作

react-native - 使用条件 react 原生样式

javascript - Codepush React-Native android 暂存版本

android - 如何在 React Native (Android) 中更改 ActivityIndi​​cator 的颜色?

javascript - react 原生 | useState 异步等待

react-native - 从组件的 "style"属性获取 CSS 属性值

react-native - 为什么 "react-native link some-native-module"是彩票?

javascript - 如何解决stackNavigator的问题

javascript - 如何在react-native中显示(二维)字符串数组

javascript - React Native如何将数据从javascript传递到java android