Question

我是新来的反应原生，我想每次按下加号按钮时添加一个新视图我自己尝试过一些东西，但到目前为止我还没有成功。我的最终目标是每次用户点击加号按钮时为乘客详细信息添加输入字段，类似于谷歌旅行应用程序。以下是我一直试图执行的代码： -

import React, { Component } from 'react';
import {
    Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, Form, Item, Input,
    Label, Grid, Col, Toast
} from 'native-base';

export default class AddBus extends Component {
    constructor(props) {
        super(props);
        this.state = {
            basic: true,
            passengerListView: [],
            info: "",
            viewSection: false
        };
    }

    renderBottomComponent() {
        if (this.state.viewSection) {

            for (count = 0; count <= 5; count++) {

                return (
                    <Content>
                        <Grid>
                            <Col style={{ flex: 1 }}>
                                <Item floatingLabel>
                                    <Icon name="ios-person" />
                                    <Label>Passenger</Label>
                                    <Input />
                                </Item>
                            </Col>
                            <Col style={{ flex: 0 }}>
                                <Button transparent >
                                    <Icon name="close" />
                                </Button>
                            </Col>
                        </Grid>

                        <Item floatingLabel>
                            <Label>Seat</Label>
                            <Input />
                        </Item>

                        <Item floatingLabel last>
                            <Label>Confirmation number </Label>
                            <Input />
                        </Item>
                    </Content>
                )

            }

        }
    }

    render() {
        const { passengerListView } = this.state;

        return (
            <Container>
                <Header>
                    <Left>
                        <Button transparent onPress={() => this.props.navigation.goBack()}>
                            <Icon name="arrow-back" />
                        </Button>
                    </Left>
                    <Body>
                        <Title>Add bus</Title>
                    </Body>
                    <Right>
                        <Button transparent onPress={() => this.props.navigation.goBack()}>
                            <Icon name="ios-folder" />
                        </Button>
                    </Right>
                </Header>
                <Content>
                    <Form>
                        <Item floatingLabel>
                            <Label>Where from?</Label>
                            <Input />
                        </Item>
                        <Item floatingLabel >
                            <Label>Where to?</Label>
                            <Input />
                        </Item>
                        <Item floatingLabel>
                            <Icon name="calendar" />
                            <Label>Departure date</Label>
                            <Input />
                        </Item>
                        <Item floatingLabel>
                            <Icon name="ios-calendar" />
                            <Label>Arrival date</Label>
                            <Input />
                        </Item>
                        <Grid>
                            <Col style={{ flex: 1 }}>
                                <Item floatingLabel>
                                    <Icon name="ios-person" />
                                    <Label>Passenger</Label>
                                    <Input />
                                </Item>
                            </Col>
                            <Col style={{ flex: 0 }}>
                                <Button transparent onPress={() => this.setState({ viewSection: true })} >
                                    <Icon name="add" />
                                </Button>
                            </Col>
                        </Grid>

                        <Item floatingLabel>
                            <Label>Seat</Label>
                            <Input />
                        </Item>

                        <Item floatingLabel last>
                            <Label>Confirmation number </Label>
                            <Input />
                        </Item>

                        {this.renderBottomComponent()}

                    </Form>

                </Content>

            </Container>
        );
    }
}

非常感谢任何帮助或建议。谢谢。

如何使用react native按钮单击添加多个视图？

0 个答案: