Question

我确信有办法做到这一点，但我还是看不出来。

我想做的是添加一个Picker组件，而不是对项目列表进行硬编码，从服务中获取，并将Picker绑定到我以后可以填充的内容。

这就是我所拥有的，但我的应用程序现在甚至都不会运行。有什么想法吗？

'use strict';
var React = require('react-native');
var {
    Picker,
    Text,
    View
} = React;

var AvailableServices = React.createClass({
    getInitialState() {
        var fetchServicesUri = 'http://some.url/available_services';
        fetch(fetchServicesUri)
            .then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson);
                var services = [];
                for(var service in responseJson.services) {
                    services.push(<Picker.Item label={service.Label} value={service.Value}/>);
                }
                this.setState({
                    services: services
                });
            })
            .catch((error) => {
                console.warn(error);
            })
            .done();
        return {
            services: [],
            selectedService: null
        }
    },

    render() {
        return (
            <View>
                <Text>Pick a service</Text>
                <Picker
                    selectedValue={this.state.selectedService}
                    onValueChange={(service) => this.setState({selectedService:service})}
                >
                    {this.state.services}
                </Picker>
            </View>
        );
    }
});

module.exports = AvailableServices;

Answer 1

您应该将初始状态设置为空数组，然后在componentWillMount或componentDidMount上调用您的服务。我已经设置了一些适用于虚拟数据here的东西，并粘贴了下面的代码。

'use strict';
var React = require('react-native');
var {
    Picker,
    Text,
    View,
      AppRegistry
} = React;

var PickerItem = Picker.Item;

var SampleApp = React.createClass({
    getInitialState() {
        return {
            services: ['a', 'b', 'c', 'd', 'e'],
            selectedService: 'a'
        }
    },

    componentDidMount() {
        setTimeout(() =>  { 
         this.setState({
          services: [ 'one', 'two', 'three', 'four', 'five' ]
         }) 
        }, 3000)
    },

    render() {
        let serviceItems = this.state.services.map( (s, i) => {
            return <Picker.Item key={i} value={s} label={s} />
        });

        return (
            <View>
                <Text>Pick a service</Text>
                <Picker
                    selectedValue={this.state.selectedService}
                    onValueChange={ (service) => ( this.setState({selectedService:service}) ) } >

                    {serviceItems}

                </Picker>
            </View>
        );
    }
});


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

Answer 2

不需要循环，这是我在基于本机的本机项目中的工作方式，类似于上述在Picker中动态绑定或添加数据的答案

import React, {Component} from 'react';
import {Picker,View} from 'react-native';
export default class SampleApp extends Component  {

    constructor(props){
        super(props);
        // HARD CODED DATA , YOU CAN REPLACE THIS DATA  WITH API CALL DATA IN ComponentDidMount() 
       //or in Constructor because countryData is not state.
        this.countryData = ["India","Pakistan","USA"];
        // STATE    
        this.state({
            selectedCountry : null
        });
    }
    // Our country list generator for picker
    countryList = () =>{
        return( this.countryData.map( (x,i) => { 
              return( <Picker.Item label={x} key={i} value={x}  />)} ));
    }
    // RENDER
    render() {
        return (
            <View>
                <Picker
                    selectedValue={this.state.selectedCountry}
                    onValueChange={ (value) => ( this.setState({selectedCountry : value}) )}>
                    { this.countryList() }
                </Picker>
            </View>
        );
    }
}

希望您发现我的示例易于理解；）

Answer 3

您可以尝试这个。

<Picker
      selectedValue={this.state.facilityId}
      style={{ width: '100%' }}
      onValueChange={(itemValue) => this.setState({ facilityId: itemValue, facilityPicked: true })}>
      {facilities.map((facility, i) => {
        return <Picker.Item key={i} value={facility.id} label={facility.facility_name} />
      })}
</Picker>

在这里，设施是具有id和设施名称作为键的对象的列表。

Answer 4

我遇到了同样的错误。问题不在于选择器，而在于您的代码。

<div></div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis iaculis dui, quis dignissim nisi. Pellentesque ac leo neque. Nunc sit amet sollicitudin ligula, in viverra mauris. Nunc viverra mollis erat luctus blandit. Nam pharetra libero et molestie
  dignissim. Aliquam non mollis mauris. Donec id risus odio. Sed tempus, leo a iaculis iaculis, orci ipsum porttitor ex, in mattis odio massa at ante. Maecenas sit amet finibus lectus. Mauris convallis ullamcorper facilisis. Integer elit augue, finibus
  sed maximus vel, feugiat vitae tellus. Integer lobortis ultricies massa sit amet porta. Etiam erat ante, pulvinar id nulla in, ultricies consequat urna. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
  occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

我使用let items = props.category.map((item,index) => { return ( <Picker.Item key={index} label={item.category} value={item.category} /> ) }) return( <Picker style={styles.pickerStyle}>{items}</Picker> );而不是使用item.category，这导致我的应用程序停止运行。因此，请检查数据的值。

Answer 5

重要：如果您尝试用map迭代数字数组，请不要忘记label的 Picker.Item属性应该是转换为字符串：

const pickerItems = [1,2,3].map(i => (
      <Picker.Item label={i.toString()} value={i} />
));

Answer 6

问题：

我正在使用map，这是ES6的JS中引入的数据结构。

我正在使用Picker作为下拉菜单。这是我的代码：

<Picker
            selectedValue={this.state.branch}
            style={styles.fieldPicker}
            mode="dropdown"

            onValueChange={(itemValue, itemIndex) =>
              this.setState({branch: itemValue})
            }>

            {/* Data Binding */}

                {this.state.branchData.forEach((name, id) => 
                      {
                      return <Picker.Item key={id} value={id} label={name} />;
                      })
                }



          </Picker>

我通过登录来检查名称和ID是否被正确访问。问题是我看不到下拉列表被填充。

将Picker Picker绑定到React Native中的Picker.Item列表

6 个答案: