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

【问题标题】：Using React-native-picker-select headless component使用 React-native-picker-select 无头组件
【发布时间】：2018-10-26 18:38:27
【问题描述】：

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

您可以传递子组件（例如自定义按钮或输入）以供组件包装（适用于 iOS 和 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 设备上却没有。在真实设备上，我似乎可以在紫色区域上四处点击，并且选择器非常零星地出现。任何帮助将不胜感激！

编辑：忘了提到这是一个专门的安卓问题，它适用于真实和模拟的 iPhone

【问题讨论】：

标签： javascript react-native picker

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

其实这行不通。得到了一些幸运的点击，而不是它再次停止工作。哎呀！