React Native - 動態加載列表中的下拉列表

Question

在反應原生中，我有一個表單（簡單字段 - 名稱，地址），並希望添加一個下拉列表以選擇用戶類型。我想從Firebase動態加載下拉列表。可能嗎 ？感謝任何幫助。

更新時間：

import React, { Component } from 'react'; 
    import { 
     AppRegistry, 
     StyleSheet, 
     Text, 
     View, 
     Picker, 
    } from 'react-native'; 

    export default class Testpicker extends Component { 

    constructor(props) { 
      super(props); 
      types = [{userType: 'admin', userName: 'Admin User'}, {userType: 'employee', userName: 'Employee User'}, {userType: 'dev', userName: 'Developer User'}]; 
this.setState({userTypes: types});   
} 


loadUserTypes() { 
    return this.state.userTypes.map(user => (
              <Picker.Item label={user.userName} value={user.userType} /> 
              )) 
} 

    render() { 
     return (
     <View> 
     <Picker 
     selectedValue={this.state.selectedUserType} 
     onValueChange={(itemValue, itemIndex) => 
     this.setState({selectedUserType: itemValue})}> 

     // Dynamically loads Picker.Values from this.state.userTypes. 

     {this.loadUserTypes()} 
     </Picker> 

     </View> 
     ) 
    } 
    } 

AppRegistry.registerComponent('Testpicker',() => Testpicker); 

現在，我收到錯誤消息 「null不是（評估 'this.state.selectedUserType'）的對象。」 我在做什麼錯？

Answer 1

當然，你可以想象，從firebase的數據是這樣的。

types = [{userType: 'admin', userName: 'Admin User'}, {userType: 'employee', userName: 'Employee User'}, {userType: 'dev', userName: 'Developer User'}]

保存此數據的狀態中爲this.setState({userTypes: types});

在你的類像這樣創建一個函數loadUserTypes。

... 
import {Picker} from 'react-native; 
... 
... 

// Inside your class. 

constructor(props) { 
    super(props); 
    // Use this.setState({userTypes: data}) when data comes from 
    // firebase. 
    this.state = { 
    userTypes: [{userType: 'admin', userName: 'Admin User'}, {userType: 'employee', userName: 'Employee User'}, {userType: 'dev', userName: 'Developer User'}], 
    selectedUserType: '' 
    } 
} 


loadUserTypes() { 
    return this.state.userTypes.map(user => (
    <Picker.Item label={user.userName} value={user.userType} /> 
)) 
} 

// Then in your render. 
render() { 
return (
    <View> 
    <Picker 
     selectedValue={this.state.selectedUserType} 
     onValueChange={(itemValue, itemIndex) => 
      this.setState({selectedUserType: itemValue})}> 

     // Dynamically loads Picker.Values from this.state.userTypes. 

     {this.loadUserTypes()} 
    </Picker> 
    </View> 
) 
} 

.map功能將改變userTypes數組的每個元素到將被返回一個RN組分和我們將有，我們可以呈現RN組件陣列。

<Picker />的文檔可從here獲取。

希望它有幫助！