使用 React-native-picker-select 无头组件

Question

我正在尝试为 iOS 和 Android 使用 React-Native-Picker-Selects 无头组件。根据找到的文档 here:

you can pass children (such as a custom button or input) for the component to wrap (for both iOS and Android

这是我的代码示例：

import React, { Component } from 'react';
import {
  View,
  Text,
} from 'react-native';

import RNPickerSelect from 'react-native-picker-select';

<View style={{flex:1}}>
  <RNPickerSelect
    placeholder={{}}
    items={MyList}
    onValueChange={(itemValue, itemIndex) => {
      console.log('itemValue')
    }}
    style={{...pickerSelectStyles}}
  >
    <View style={{backgroundColor:'purple', flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text>
        Test Text where I should be able to touch to get things to happen
      </Text>
    </View>
  </RNPickerSelect>

  const pickerSelectStyles = StyleSheet.create({
    headlessAndroidContainer: {
      flex:1
    }
  });
  <View style={{height:height * 0.5}}>
    <Text>test</Text>
  </View>
</View>
const pickerSelectStyles = StyleSheet.create({
  viewContainer: {
    flex:1,
    backgroundColor: 'purple',
  },
  headlessAndroidContainer: {
    backgroundColor: 'purple',
    flex:1
  }
});

我预计会发生的是，在我的屏幕上我看到两部分，一半是紫色，一半是白色。紫色部分有文字说事情应该发生，白色部分应该有测试。我应该可以点击紫色部分的任何地方，然后我的 MyList 选择器就会出现。

这在模拟器上按预期工作，但在真正的 android 设备上却不行。在真实设备上，似乎我可以在紫色区域四处轻敲，而且选择器偶尔会出现。如有任何帮助，我们将不胜感激！

编辑：忘了说这是一个 android 问题，它适用于真实和模拟的 iPhone

Answer 1

添加最新版本（5.0 版）似乎可以解决此问题。我添加的版本是 4.4，大概 10 天前我将它添加到我的项目中。最新版本大约一周前发布，似乎解决了这个问题。

Answer 2

似乎由于某种原因将 RNPickerselect 包裹在 TouchableWithoutFeedback 中会破坏它，一旦在该标签之外它就可以正常工作。

使用 React-native-picker-select 无头组件

Using React-native-picker-select headless component

javascript

picker

react-native