Reaction-native-picker-select не работает с родительским представлением {flexDirection: 'row'} - PullRequest
0 голосов
/ 07 ноября 2019

Я хочу использовать <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
},
});

При запуске вышеупомянутого приложения я получаю что-то вроде

enter image description here

Как видите, сборщик не показывает текст.

Ниже приведены настройки, которые я использую

response-native-picker-select version: 6.3.3

Реактивная версия: 0.61.2

Реактивная версия: 16.9.0

...