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 />获得。

希望能帮助到你！