解决方案

Question

我有一个组件，我试图通过PickerIOS反应本机组件呈现值列表，但项目没有填充。我想填充jobs.type值。

以下是代码：

import React from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {List} from 'immutable'

const {
  Image,
  View,
  ListView,
  MapView,
  PickerIOS,
  Text,
  TouchableOpacity,
} = React;

let PickerItemIOS = PickerIOS.Item;
import {changePage} from '../actions/PageActions'
import {dashboardStyle, style} from '../styles'

class JobsMap extends React.Component {
  render() {
    const region = {
      latitude: 42.333390,
      longitude: -71.083523,
      latitudeDelta: .01,
      longitudeDelta: .01,
    }

    const annotations = this.props.jobs.map((job) => ({
      latitude: job.location[0],
      longitude: job.location[1],
      title: job.title,
      subtitle: job.type,
      id: job.title
    })).toJS()

    console.log(annotations)

    return <MapView
            onAnnotationPress={(x) => console.log(x)}
            annotations={annotations}
            region={region}
            style={dashboardStyle.map} />
  }
}


export default class EmployerDashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {jobType: 'Server'};

    const datasource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1.title !== r2.title && r1.badge !== r2.badge
    })

    const jobs = List([{
      title: "A restaurant",
      type: "Server",
      location: [42.33, -71.08],
    }, {
      title: "Some place nice",
      type: "Server",
      location: [42.333390, -71.083523],
    }, {
      title: "Happy meals",
      type: "Server",
      location: [42.335, -71.079],
    }, {
      title: "Cool Cafe",
      type: "Bartender",
      location: [42.337, -71.08],
    }])

    this.state = {datasource, jobs}
    this.state.datasource = this.updateDatasource()
  }

  updateDatasource() {
    const xs = this.state.jobs
    .groupBy(thing => thing.type)
    .map(x => x.size)
    .entrySeq().map((x) => ({
      title: x[0],
      badge: x[1]
    })).toJS()

    return this.state.datasource.cloneWithRows(xs)
  }

  renderSeparator() {
    return <View style={dashboardStyle.rowSeparator} />
  }

  render() {
    //const toolong = "https://scontent-ams3-1.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10848063_889114987800263_2854852205112396164_n.jpg?oh=6eb110dc1c6d722f989bf0f0431c8a7d&oe=565139C3"
    //const avauri = {uri: toolong}
    const avauri = {uri: 'https://facebook.github.io/react/img/logo_og.png'}
    const {datasource, jobs} = this.state

    return (
      <View style={style.view}>
        <View style={dashboardStyle.info}>
          <PickerIOS
            selectedValue={this.state.jobType}
              onValueChange={(jobType) => this.setState({jobType})}>
              {Object.keys(jobs).map((jobType) => (
                <PickerItemIOS
                  key={jobType}
                  value={jobType}
                  label={jobs.name}
                 />
                )
              )}
          </PickerIOS>
        </View>
        <JobsMap jobs={jobs} />
      </View>
    );
  }
}

知道发生了什么事吗？

Answer 1

由于您使用的是不可变列表，因此作业“列表”的工作方式略有不同。以下代码中存在一些错误：

{Object.keys(jobs).map((jobType) => (
        <PickerItemIOS
            key={jobType}
            value={jobType}
            label={jobs.name}
        />
    )
)}

Object.keys为您提供作为类List实例的作业属性。所以，你用.map（）
你对jobs.name的期望是什么？为什么这样？

解决方案

一般来说，试着了解Immutable的工作原理。您可以通过这种方式迭代List：

{jobs.map((job, index) => (
    <PickerItemIOS
        key={index}
        value={index}
        label={job.type}
    />
)}

Answer 2

<View>
    <PickerIOS style={styles.picker}>
        {(this.state.people).map((person, index) =>
        <PickerItemIOS
            key={index}
            value={person.name}
            label={person.name}
        />
        )}
    </PickerIOS>
</View>

我能够让它发挥作用。希望这有帮助

PickerIOS无法使用React Native

2 个答案:

解决方案