react-native-picker-select 不使用父视图 {flexDirection:'row'}答案

【问题标题】：react-native-picker-select not Working with Parent View {flexDirection:'row'}react-native-picker-select 不使用父视图 {flexDirection:'row'}
【发布时间】：2019-11-07 10:37:00
【问题描述】：

我想在一行中使用 <RNPickerSelect./> 和 <TextInput/>。因此，当我创建父 flexDirection: row 时，我只看到箭头而看不到文字。即使我删除了<TextInput/>，我在选择器中也看不到任何文字。

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';

type Props = {}

const countryCode = [
{
    label: '+91',
    value: '+91',
},
{
    label: '+1',
    value: '+1',
},
{
    label: '+2',
    value: '+2',
},
];

export default class PickerTest extends Component<Props> {

constructor() {
    super()
    this.state = {
        phoneNumber: "",
        countryCode: ""
    }
}

render() {
    return (
        <View style={{flexDirection:'row'}}>
            <View paddingVertical={5}>
            {/* and hiding the InputAccessoryView on iOS */}
            <RNPickerSelect
            placeholder={{}}
            items={countryCode}
            onValueChange={value => {
            this.setState({
                countryCode: value,
            });
            }}
            InputAccessoryView={() => null}
            style={pickerSelectStyles}
            value={this.state.countryCode}
            />
            </View>
        </View>
    );
}
}

const pickerSelectStyles = StyleSheet.create({
inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
},
inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'purple',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
},
});

在运行上面的应用程序时，我得到了类似的东西

如您所见，选择器没有显示文本。

以下是我正在使用的配置

react-native-picker-select 版本：6.3.3

react-native 版本：0.61.2

反应版本：16.9.0

【问题讨论】：

标签： reactjs react-native react-native-android react-native-picker-select

【解决方案1】：

这是上游问题：https://snack.expo.io/HkygCqhsr

选项：

useNativeAndroidPickerStyle道具
将width 和height 设置为inputAndroid 样式属性

【讨论】：

【解决方案2】：

使用选项overflow: 'hidden'

将属性“pickerProps”添加到RNPickerSelect

<RNPickerSelect style={styles.selectContainer}
                ...
                pickerProps={{ style: { height: 214, overflow: 'hidden' } }}
                ...
            />

【讨论】：