如何定位React Native Picker的下拉菜单

Question

我正在尝试在React Native Android应用程序中显示下拉菜单。我使用了React Native Picker，但似乎在样式和定位下拉菜单方面非常有限。我无法使菜单在插入符（向下箭头按钮）位置下弹出。我尝试设置边距以将菜单向下推，但没有成功。

              <Picker
                // selectedValue={stateValue}
                style={{
                  height: 36,
                  width: 261,
                }}
                onValueChange={itemValue => {
                  console.log('item value ', itemValue);
                }}
              >
                <Picker.Item key={-1} label={'Search By...'} value="first" />
                {this.searchCategory.map((item, index) => (
                  <Picker.Item key={index} label={item} value={item} />
                ))}
              </Picker>
            </View>

菜单总是覆盖选择器组件。我希望它出现在选择器下方。

实际行为:

预期行为：

- Daniel

---

这是 Android 的默认 Spinner 行为。您无法更改它。如果要更改行为，请在 React Native Picker 上设置 mode 属性为 "dialog"。如果您想要更多控制，请使用自定义 Picker，例如：https://www.npmjs.com/package/react-native-custom-picker - Saadi

那么没有办法改变这种行为吗？你提到的包相当不受欢迎，所以我有点犹豫要尝试它。 - Daniel

据我所知，不，您无法更改此行为。我真的认为下拉菜单不应该在智能手机屏幕上以您想要的方式显示。因为屏幕尺寸有限。这就是为什么它们有模式属性的原因。 - Saadi

该应用程序旨在显示在POS设备上，因此采用了这种设计。但是我现在理解了您的观点。我会寻找不同的软件包/解决方案，因为RN Picker在样式方面非常有限。 - Daniel

Answer 1

通过一些研究，发现这是一个Android的限制，似乎我们在React Native Picker中无法进行太多控制。一些自定义的包可以给我们更多的控制权，例如https://www.npmjs.com/package/react-native-picker-select 或 https://github.com/sohobloo/react-native-modal-dropdown。

- Daniel