NativeBase - ReactNative - Dropdown

Question

どうすればいいですか？

ボタンをクリックして開いたドロップダウンリストで、このドロップダウンリストには他のアイテムのリストが含まれています。それが可能であれば、動的に！例えば

： カテゴリー：果物、食品（最初のドロップダウンリスト） そして、このカテゴリの各カテゴリのリストがある：

フルーツ：[「バナナ」、「アップル」、「ストロベリー」 ] 食品：["1"、 "2"、 "3"]。

は次のようになります。

Answer 1

私は、あなたのためのアイデアを持っている、これはあなたの問題を解決することを願っています。今のところ、入れ子にされたピッカーコンポーネントを追加する方法はありません。だから私はこのアイデアを思い付いた：

まず、我々はボタンをクリックしながら、データが

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

次のショーのコンポーネントの状態のトグルを作成再編がある

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

次のトリガする関数を作成しています状態

ドロップダウンを表示するためのボタン

<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

私はそれをすることを願ってあなたを助けてください:)