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获取。

希望它有帮助！