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

Posted 2023-02-24

【中文标题】使用 React-native-picker-select 无头组件

【英文标题】：Using React-native-picker-select headless component

【发布时间】：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

【参考方案1】：

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

【参考方案2】：

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

【讨论】：

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