android - NativeBase - ReactNative - 下拉列表

Question

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

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

例如: 类别:水果，食品(第一个下拉列表) 在这个类别中，每个类别都有一个列表:

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

看起来像这样:

Answer 1

我有一个想法给你，希望这能解决你的问题。目前无法添加嵌套的 Picker 组件。所以我想出了这个主意:

首先是重构数据

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

下一步在我们点击按钮时为显示组件创建状态切换

 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

希望对你有帮助:)