Question

我正在尝试为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设备上运行。在真实的设备上，似乎可以在紫色区域上轻按，选择器会偶尔出现。任何帮助将不胜感激！

编辑：忘了提到这是一个Android问题，它可以在真实和模拟iPhone上使用

Answer 1

似乎将RNPickerselect封装在TouchableWithoutFeedback中会由于某种原因而使它中断，一旦超出该标记，它就可以正常工作。

Answer 2

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

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

2 个答案: