Question

React本机库中的选择器的插入符号图标在单击时未正确响应。有时在完全单击插入符号图标时，它会做出响应，有时却没有。

Answer 1

这很好：

import { Picker,Item } from 'native-base';

<View>
<Item rounded style={[styles.inputStyle, { marginTop: 6 }]}>
      <Picker
          mode="dropdown"
          iosIcon={<Icon name="arrow-down" />}
          placeholderStyle={{ color: "#bfc6ea" }}
          placeholderTextColor="white" 
          placeholderIconColor="#007aff"
          style={[styles.inputmain, {height: 44}]}
          selectedValue={this.state.selected}
          onValueChange={this.onValueChange.bind(this)}
      >
          <Picker.Item label="Select Gender" value=""/>
          <Picker.Item label="Male" value="male"/>
          <Picker.Item label="Female" value="female"/>
          <Picker.Item label="Other" value="other"/>
      </Picker>
 </Item>
 </View>

样式：

inputStyle: {
    borderColor: "transparent",
    justifyContent: "center",
    alignSelf: "center",
    width: Metrics.WIDTH * 0.8
  },
  inputmain: {
    justifyContent: "center",
    alignSelf: "center",
    paddingTop: 7,
    paddingBottom: 7,
    paddingLeft: 20,
    borderRadius: 40,
    width: Metrics.WIDTH * 0.8,
    backgroundColor: "rgba(102,102,102,0.6)"
  },

Answer 2

对于遇到此问题的任何人-我的问题是我将选择器包装在Item输入字段中（将选择器prop设置为true，如in the official NativeBase docs所述），这导致图标插入符号在Android上不可点击。

import { Item, Picker } from 'native-base';

<Item picker style={styles.picker}>
    <Picker .... />
</Item>

删除此Item输入字段并用View替换它（并应用适当的样式）即可解决此问题。

import { View } from 'react-native';
import { Picker } from 'native-base';

<View style={styles.picker}>
    <Picker ... />
</View>

本机基本选择器图标不可单击

2 个答案: