React Native Picker 占位符文本被剪切

Posted 2023-02-25

【中文标题】React Native Picker 占位符文本被剪切

【英文标题】：React Native Picker placeholder text is cut

【发布时间】：2018-01-24 08:23:27

【问题描述】：

图片比文字更有价值：

Picker 项的原始标签是“WEEEEEEK”。我不明白为什么 Picker 组件会裁剪文本，尽管仍有至少 4 个字符的空间。

这是一个代码示例：

<View style=flex: 0.25>
                <View style=s.calendarFilterContainer>
                    <Picker
                        style= height: 30 
                        mode="dropdown"
                        placeholder=t('common:filterPlaceholder')
                        selectedValue=selectedValue
                        onValueChange=(value) => this.onValueChange(value)
                        headerBackButtonText=t('common:back')
                    >
                        <Item label='Day'.toUpperCase() value="day" />
                        <Item label='Weeeeeeek'.toUpperCase() value="week" />
                        <Item label='All'.toUpperCase() value="all" />
                        <Item label='To do'.toUpperCase() value="todo" />
                    </Picker>
                </View>
            </View>

const s = StyleSheet.create(
    calendarFilterContainer: 
        alignSelf: 'flex-end',
        width: 130,
        borderWidth: 2,
        borderColor: C.COLOR_THEME,
        backgroundColor: 'white',
        borderRadius: 10,
        marginRight: 10,
    ,
);

即使设置大宽度，也不会显示全文。

【参考方案1】：

更改选择器样式属性的宽度，而不是视图的样式属性

                  <Picker
                    style= height: 30 , width:'30%'
                    mode="dropdown"
                    placeholder=t('common:filterPlaceholder')
                    selectedValue=selectedValue
                    onValueChange=(value) => this.onValueChange(value)
                    headerBackButtonText=t('common:back')
                   >
                    <Item label='Day'.toUpperCase() value="day" />
                    <Item label='Weeeeeeek'.toUpperCase() value="week" />
                    <Item label='All'.toUpperCase() value="all" />
                    <Item label='To do'.toUpperCase() value="todo" />
                </Picker>