Question

是新的反应本地＆amp; 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

我如何使用TextInput＆amp;使用Nativebase on react-native下拉

1 个答案: