Question

您对如何做到这一点有什么想法吗？

通过单击按钮打开下拉列表，此下拉列表包含其他项目列表。如果可能的话，动态地动态！

例如：分类：水果，食品（第一个下拉列表）在这个类别中，每个类别都有一个列表：

水果：[“香蕉”，“苹果”，“草莓”] 食物：[“1”，“2”，“3”]。

看起来像这样：

Answer 1

我有一个想法，希望这可以解决你的问题。目前无法添加嵌套的Picker组件。所以我提出了这个想法：

首先重组数据

const data = [
    {'title' : 'Fruits',
    'items' : ["Banana", "Apple", "Strawberry"]
    },
    {'title' : 'Foods',
    'items' : ["1", "2", "3"]}
]

当我们点击按钮

时，接下来为show组件创建状态切换

 constructor() {
  super();
  this.state = {
      toggleDropdown: false
  }
}

接下来是创建触发状态的函数

onClickButton = () => {
  this.setState({
      toggleDropdown: !this.state.toggleDropdown
  })
}

制作按钮以显示下拉列表

<Button primary onPress={this.onClickButton}>
   <Text>Click Me!</Text>
</Button>

并显示下拉列表

{this.state.toggleDropdown &&  //cek if toggle is true or false
            data.map((item, index) => { //loop the first dropdown
                return (
                    <Content key={index}>
                        <Text style={{backgroundColor: '#CCC'}} >{item.title}</Text>
                        <Picker mode="dropdown" > 
                            {item.items.map((value, idx) => { //loop the second dropdown
                                return(
                                    <Item key={idx} label={value} value={idx} />
                                )
                            })}
                        </Picker>
                     </Content>
                )
            })
        }

这是完整的源代码：

import React, { Component } from 'react';
import { Container, Content, Text, Button, Picker, Item } from 'native-base';

const data = [
        {'title' : 'Fruits',
        'items' : ["Banana", "Apple", "Strawberry"]
        },
        {'title' : 'Foods',
        'items' : ["1", "2", "3"]}
]

class Example extends Component {
  constructor() {
      super();
      this.state = {
          toggleDropdown: false
      }
  }
  onClickButton = () => {
      this.setState({
          toggleDropdown: !this.state.toggleDropdown
      })
  }
  render() {
    return (
        <Container>
          <Content>
            <Button primary onPress={this.onClickButton}>
                <Text>Click Me! </Text>
            </Button>
            {this.state.toggleDropdown &&  //cek if toggle is true or false
                data.map((item, index) => { //loop the first dropdown
                    return (
                        <Content key={index}>
                            <Text style={{backgroundColor: '#CCC'}} >{item.title}</Text>
                            <Picker mode="dropdown" > 
                                {item.items.map((value, idx) => { //loop the second dropdown
                                    return(
                                        <Item key={idx} label={value} value={idx} />
                                    )
                                })}
                            </Picker>
                         </Content>
                    )
                })
            }
           </Content>
        </Container>
    );
  }
}

export default Example

这是截图：

Screenshot

我希望它可以帮到你:)。

NativeBase - ReactNative - 下拉列表

1 个答案: