如何自定义选取器？

Question

我想知道您是否有办法在此组件中删除文本并添加图标吗？

https://docs.nativebase.io/Components.html#picker-def-headref

我希望它看起来像这样...如何使用必须手动执行的本机库进行修改？

import React, { Component } from "react";
import { Container, Header, Content, Picker, Form } from "native-base";

export default class PickerExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: "key1"
    };
  }
  onValueChange(value: string) {
    this.setState({
      selected: value
    });
  }
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Form>
            <Picker
              note
              mode="dropdown"
              style={{ width: 120 }}
              selectedValue={this.state.selected}
              onValueChange={this.onValueChange.bind(this)}
            >
              <Picker.Item label="Wallet" value="key0" />
              <Picker.Item label="ATM Card" value="key1" />
              <Picker.Item label="Debit Card" value="key2" />
              <Picker.Item label="Credit Card" value="key3" />
              <Picker.Item label="Net Banking" value="key4" />
            </Picker>
          </Form>
        </Content>
      </Container>
    );
  }
}

Answer 1

最近我遇到了这个问题。但无法按选择器项进行解析。 我用

  

react-native-searchable-dropdown

软件包。您可以自定义此程序包并添加图标。