web-dev-qa-db-ja.com

React Native-リストが動的に読み込まれるフォームのドロップダウン

反応ネイティブでは、フォーム（単純なフィールド-名前、アドレス）があり、ユーザータイプを選択するためのドロップダウンを追加したいと思います。ドロップダウンリストを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'を評価しています）」というエラーメッセージが表示されます。私は何が間違っているのですか？

react-nativedropdown
4
CNK2343

もちろん、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 />_のドキュメントは、 ここ から入手できます。

それが役に立てば幸い！

3
Mustansir Zia