Question

我正在使用以下存储库中的react-native-picker-select：https://www.npmjs.com/package/react-native-picker-select。我使用的标签要大到适合屏幕大小，因此文本不能完全显示。我已经尝试过对文本进行一些样式设置，但似乎不起作用。

这是我的组件：

<View
  style={[styles.flex1, styles.row, {justifyContent: aligned ? aligned : 'flex-start'}]}
>
  <TouchableOpacity style={[styles.dropdownView, styles.shadowView, {width: this.props.dropdownWidth}]}>
     <RNPickerSelect
       value={this.props.value ? this.props.value : ''}
       placeholderTextColor={'black'}
       placeholder={placeholder}
       items={this.props.options}
       onValueChange={value => this.onDropdownChange(value)}
     />
  </TouchableOpacity>
</View>

这是我的使用方式：

<Dropdown
  value={options.values![1]}
  dropdownWidth={'100%'}
  aligned={'center'}
  placeholder={'Atividade e evidência de doença:'}
  options={
    {label: 'Atividade normal e trabalho; sem evidências de doença.', value: 0, key: 1},
    {label: 'Atividade normal e trabalho; alguma evidência de doença.', value: 1, key: 0.5},
    {label: 'Atividade normal com esforço; alguma evidência de doença.', value: 2, key: 0.5},
    {label: 'Incapaz para o trabalho. Doença significativa.',  value: 3, key: 0.5},
    {label: 'Incapaz para os hobbies/trabalho doméstico. Doença significativa.', value: 4, key: 0.5},
  }
  onDropdownSelect={(value) => null}
/>

我希望文本变大以适合行时会出现换行符。

Answer 1

不幸的是，这是iOS上本机选择器模块的局限性。在Android上，there may be a way可以处理此问题，但我尚未对其进行测试。

Answer 2

如果您仍在寻找解决方案。如果只是要在屏幕上显示所选择的项目（而不是在选择器本身中包含多行项目），则可以向RNPickerSelect组件添加子项。

因此，您只需将组件更新为：

<View style={[styles.flex1, styles.row, {justifyContent: aligned ? aligned : 'flexstart'}]}>
  <TouchableOpacity style={[styles.dropdownView, styles.shadowView, {width: this.props.dropdownWidth}]}>
    <RNPickerSelect
     value={this.props.value ? this.props.value : ''}
     placeholderTextColor={'black'}
     placeholder={placeholder}
     items={this.props.options}
     onValueChange={value => this.onDropdownChange(value)}
   >
     <Text style={{...}}>{this.props.value != null ? this.props.items[this.props.value].label : this.props.items[0].label}</Text>
    </RNPickerSelect>
  </TouchableOpacity>
</View>

如何在“ react-native-picker-select”上断开标签行

2 个答案: