如何在 "react-native-picker-select" 上打断标签线

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 组件中添加一个child。

因此，在您的情况下，只需将您的组件更新为：

<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>

Answer 3

使用RNPickerSelect 8.0.4，您可以：

<RNPickerSelect
    textInputProps={{multiline: true}}
    pickerProps={{numberOfLines: 10}}
    style={styles.pickerStyle}
    useNativeAndroidPickerStyle={false}
    onValueChange={handleChange}
    Icon={() => {return <Icon name='arrow-drop-down' size={25}/>}}
    items={props.items}
/>

textInputProps={{multiline: true}} 将允许包装选择器的 selected 值。
请注意，您需要 useNativeAndroidPickerStyle={false} 才能在 Android 上工作 - 这意味着您需要在样式中使用 inputAndroid 和 inputAndroidContainer 手动设置选择器的样式。

pickerProps={{numberOfLines: 10}} 将允许在 Android 的 selecting 模式下换行每个标签中的文本。您不需要 useNativeAndroidPickerStyle={false} 即可在 Android.
上运行对于 ios，此功能实际上已添加到此库在版本 2.2.0.
中包含的库中但是，至少在 Expo 中，react-native-picker-select 库目前只支持 2.1.0.

如何在 "react-native-picker-select" 上打断标签线

How to break line of label on "react-native-picker-select"

react-native

react-native-android

react-native-ios