如何在 react-native 上使用 Nativebase 来使用 TextInput & Dropdown

am new 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>

试试这个

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>
    );
  }
}

查看此链接

相关内容

最新更新

热门标签：