React Native中设置react-native-select-dropdown宽度为默认自适应文本

react-native-select-dropdown组件默认硬编码了50%的宽度，要实现宽度随内部文本自适应，可通过以下方式处理：

• 在buttonStyle中直接覆盖宽度设置，同时调整对齐方式避免容器拉伸：

  buttonStyle={{
      backgroundColor: 'transparent',
      paddingHorizontal: 0,
      width: 'auto', // 覆盖硬编码的50%宽度
      alignSelf: 'flex-start' // 确保容器仅占内容所需宽度
  }}
  

• 如果下拉弹窗的宽度也需要适配内容，添加dropdownStyle配置：

  dropdownStyle={{
      width: 'auto' // 让下拉菜单宽度跟随选项内容
  }}
  

修改后的完整代码示例：

<SelectDropdown
    defaultValue={Constants['walletList'][defaultDropdownValue().nickName]}
    data={Constants['walletList']}
    buttonStyle={{
        backgroundColor: 'transparent',
        paddingHorizontal: 0,
        width: 'auto',
        alignSelf: 'flex-start'
    }}
    buttonTextStyle={{
        fontSize: 14,
        padding: 0,
        margin: 0,
        marginHorizontal: 0,
    }}
    dropdownStyle={{
        width: 'auto'
    }}
/>

若上述样式覆盖不生效，可尝试给按钮容器添加flex: 0，强制容器收缩以贴合内容：

buttonStyle={{
    // ...其他样式
    flex: 0,
    width: 'auto'
}}

内容的提问来源于stack exchange，提问作者Jake Mulhern