如何为React Native选择器项设置样式以包裹过长的文本？

Question

我使用React Native设计了一个选择器，尝试使用styles.XML进行样式设置，但是不起作用。当文本长度超过宽度时，我希望下拉选项在第二行自动换行。

最初的回答：

你可以尝试在styles.XML中为下拉选项添加以下属性：

{
  flexWrap: 'wrap',
  width: '100%'
}

这将使下拉选项在超出宽度时自动换行到第二行。

class PickerExample extends Component {
   state = {link: ''}
   updateUser = (link) => {
      this.setState({ link: link })
   }
   render() {
      return (
         <View>
            <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
               <Picker.Item label = "25 best small-business apps in 2018 - nerdwallet" value = "one" />
               <Picker.Item label = "Top business apps, best apps for small business" value = "two" />
               <Picker.Item label = "Collaboration & productivity apps for business" value = "three" />
            </Picker>
            <Text style = {styles.text}>{this.state.link}</Text>
         </View>
      )
   }
}
export default PickerExample

Styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
        <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
    </style>

    <style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">>
        <item name="android:fontFamily">segoe-ui</item>
    </style>

    <style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>   
        <item name="android:singleLine">false</item>
    </style>

</resources>

- Beginner

Answer 1

Add below line into your custom style

<item name="android:inputType">textMultiLine</item>

Hope this will work!

- Sushant Patil

---

我应该把这个自定义样式放在哪里？ - im_tsm

Answer 2

                <Picker
                
                  selectedValue={gender}
                  style={GlobalStyles.picker}
                  numberOfLines={3} // use this number of lines attribute .it works file in android
                >
              
                    <Picker.Item
                      label={item.label}
                      value={item.value}
                      key={item.label}
                      fontFamily="Raleway-Medium"
                      style={GlobalStyles.pickerText}
                    />
           
                </Picker>

- sreya