我如何通过在 react-native 上使用 Native Base 来使用 Text Input 和 Dropdown

Question

我是新的 react-native 和 nativebase。我尝试使用 nativebase 在同一页面中构建 Textinput 和 Dropdown(Picker) 但我不能。我想在同一页面中同时使用它们。你能告诉我怎么做吗？非常感谢

//I want this to be Textinput
<CardItem style={{bottom: 60}}>
  <Text style={{fontSize: 20, fontWeight: 'bold' }}>Text Input</Text>
</CardItem>
<CardItem style={{bottom: 75}}>
  <Item rounded style={{borderColor: '#708090' }}>
    <Input placeholder="" />
  </Item>
</CardItem>

//I want this to be Dropdown
<CardItem style={{bottom: 75}}>
  <Text style={{fontSize: 20, fontWeight: 'bold' }}>Dropdown</Text>
</CardItem>
<CardItem style={{bottom: 90}}>
  <Item rounded style={{borderColor: '#708090' }}>
    <Input placeholder="" />
  </Item>
</CardItem>

Answer 1

试试这个

import React from "react";
import {
  Container,
  Header,
  Content,
  Card,
  CardItem,
  Body,
  Text,
  Form,
  Item,
  Input,
  Picker,
} from "native-base";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected1: "key1",
    };
  }
  onValueChange(value) {
    this.setState({
      selected1: value,
    });
  }

  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Card>
            <CardItem>
              <Body>
                <Text>Text Input</Text>
              </Body>
            </CardItem>
            <CardItem>
              <Body>
                <Item rounded style={{ borderColor: "#708090" }}>
                  <Input placeholder="" />
                </Item>
              </Body>
            </CardItem>
            <CardItem>
              <Body />
            </CardItem>
          </Card>

          <Card>
            <Text style={{ margin: 15 }}>Drop Down</Text>
            <Form style={{ marginLeft: 10, marginRight: 15 }}>
              <Picker
                iosHeader="Select one"
                mode="dropdown"
                selectedValue={this.state.selected1}
                onValueChange={this.onValueChange.bind(this)}
              >
                <Item label="Wallet" value="key0" />
                <Item label="ATM Card" value="key1" />
                <Item label="Debit Card" value="key2" />
                <Item label="Credit Card" value="key3" />
                <Item label="Net Banking" value="key4" />
              </Picker>
            </Form>
          </Card>
        </Content>
      </Container>
    );
  }
}

看到这个link

我如何通过在 react-native 上使用 Native Base 来使用 Text Input 和 Dropdown

How can i use TextInput & Dropdown by using Nativebase on react-native

react-native

native-base