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

问题描述 投票:0回答:2

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

reactjs react-native native-base
2个回答
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)"
  },

0
投票

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

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

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

删除此项目输入字段并用View替换(并应用适当的样式)解决了此问题。

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

<View style={styles.picker}>
    <Picker ... />
</View>
© www.soinside.com 2019 - 2024. All rights reserved.