1

我想在一行中<RNPickerSelect./>使用。<TextInput/>因此，当我制作 Parent 时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

反应原生版本：0.61.2

反应版本：16.9.0

4

2 回答 2

1

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

选项：

  1. useNativeAndroidPickerStyle支柱
  2. 设置width并height带有inputAndroid样式道具
于 2019-11-19T16:19:52.480 回答
0

使用选项溢出将属性“pickerProps”添加到 RNPickerSelect ：'hidden'

<RNPickerSelect style={styles.selectContainer}
                ...
                pickerProps={{ style: { height: 214, overflow: 'hidden' } }}
                ...
            />
于 2021-04-19T18:01:11.077 回答