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

希望它有所帮助！

React Native - 以动态列表加载的形式下拉列表

1 个答案: