我正在使用此存储库中的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}
/>
当文本变大以适合该行时,我预计会出现换行符。
最佳答案
使用 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}}
将允许对选择器的选定值进行换行。
请注意,您需要 useNativeAndroidPickerStyle={false}
才能在 Android 上运行 - 这意味着您需要使用 inputAndroid
和 inputAndroidContainer
手动设置选择器的样式code> 在您的样式中。
pickerProps={{numberOfLines: 10}}
将允许在 Android 选择模式下换行每个标签中的文本。您不需要 useNativeAndroidPickerStyle={false}
即可在 Android 上使用此功能。
对于ios来说,这个功能实际上是被添加到版本2.2.0这个库所包裹的库中的。 .
不过,至少在Expo中,react-native-picker-select库目前只支持2.1.0。
关于react-native - 如何打破 "react-native-picker-select"上的标签行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57446543/