Javascript 如何使用react native在单击按钮时添加多个视图？
我对react native很陌生，每次按下加号按钮时我都会添加一个新视图。我自己也尝试过一些方法，但到目前为止还没有成功。 我的最终目标是在每次用户点击加号按钮时为乘客详细信息添加一个输入字段，类似于谷歌旅行应用程序。 以下是我一直试图执行的代码：-Javascript 如何使用react native在单击按钮时添加多个视图？,javascript,reactjs,react-native,onclick,native-base,Javascript,Reactjs,React Native,Onclick,Native Base,我对react native很陌生，每次按下加号按钮时我都会添加一个新视图。我自己也尝试过一些方法，但到目前为止还没有成功。 我的最终目标是在每次用户点击加号按钮时为乘客详细信息添加一个输入字段，类似于谷歌旅行应用程序。 以下是我一直试图执行的代码：- import React, { Component } from 'react'; import { Container, Header, Title, Content, Footer, FooterTab, Button, Left,
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>
);
}
}
import React，{Component}来自'React'；
进口{
容器、页眉、标题、内容、页脚、页脚选项卡、按钮、左、右、正文、图标、文本、表单、项、输入、，
标签、网格、列、吐司
}来自“本土基地”；
导出默认类AddBus扩展组件{
建造师（道具）{
超级（道具）；
此.state={
基本：对，
passengerListView:[]，
信息：“，
viewSection:false
};
}
renderBottomComponent（）{
if（this.state.viewSection）{
对于（计数=0；计数
添加总线
this.props.navigation.goBack（）}>
从哪里来？
去哪里？
出发日期
到达日期
乘客
this.setState（{viewSection:true}）}>
座位
确认号
{this.renderBottomComponent（）}
);
}
}