【第22期】观点:IT 行业加班,到底有没有价值?

PickerIOS

原创 2016年06月01日 15:28:34

PickerIOS是只能在iOS上使用的选择组件,对应iOS平台上的UIPickerView。中文网上详细的使用demo http://reactnative.cn/docs/0.26/pickerios.html#content,但如果只是按着demo敲的话发现PickerIOS组件显示不出来。发现demo上没有使用itemStyle这一属性。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    PickerIOS
} from 'react-native';

var PickerItemIOS = PickerIOS.Item;

var CAR_MAKES_AND_MODELS = {
  amc: {
    name:'AMC',
    models:['AMX','Concord','Eagle','Gremlin','Matador','Pacer']
  },
  alfa: {
    name:'Alfa-Romeo',
    models:['159','4C','Alfasud','Brera','GTV6','Giulia','MiTo','Spider']
  },
  aston: {
    name:'Aston Martin',
    models:['DB5','DB9','DBS','Rapide','Vanquish','Vantage']
  },
  audi: {
    name:'Audi',
    models:['90','4000','5000','A3','A4','A5','A6','A7','A8','Q5','Q7']
  },
  austin: {
    name:'Austin',
    models:['America','Maestro','Maxi','Mini','Montego','Princess']
  },
  borgward: {
    name:'Borgward',
    models:['Hansa','Isabella','P100']
  },
  buick: {
    name:'Buick',
    models:['Electra','LaCrosse','LeSabre','Park Avenue','Regal','Roadmaster','Skylark']
  },
  cadillac: {
    name:'Cadillac',
    models:['Catera', 'Cimarron', 'Eldorado', 'Fleetwood', 'Sedan de Ville']
  },
  chevrolet: {
    name: 'Chevrolet',
    models: ['Astro', 'Aveo', 'Bel Air', 'Captiva', 'Cavalier', 'Chevelle',
      'Corvair', 'Corvette', 'Cruze', 'Nova', 'SS', 'Vega', 'Volt']
  }
};

class PickerIOSDemo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      carMake:'cadillac',
      modelIndex:3
    }
  }

  render() {
    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
    var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
    return (
      <View style={styles.container}>
       <Text>Please choose a make for your car:</Text>
        <PickerIOS
        //demo上没有设置该属性,导致无法显示
            itemStyle={{width: 200,height: 200}}
            selectedValue={this.state.carMake}
            onValueChange={(carMake) => this.setState({carMake:carMake,modelIndex:0})}>
            {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) =>(
                <PickerItemIOS
                    key={carMake}
                    value={carMake}
                    label={CAR_MAKES_AND_MODELS[carMake].name}
                />
            ))}
        </PickerIOS>
        <Text>Please choose a model of {make.name}</Text>
        <PickerIOS
        //demo上没有设置该属性,导致无法显示
            itemStyle={{width: 200,height: 200}}
            selectedValue={this.state.modelIndex}
            key={this.state.carMake}
            onValueChange={(modelIndex) => this.setState({modelIndex:modelIndex})}>
          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName,modelIndex) => (
              <PickerItemIOS
                  key={this.state.carMake + '_' + modelIndex}
                  value={modelIndex}
                  label={modelName}
              />
          ))}
        </PickerIOS>
        <Text>You selected: {selectionString}</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
});

AppRegistry.registerComponent('PickerIOSDemo', () => PickerIOSDemo);
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

react-native基类设计

背景前段时间发现iOS手机上,很多页面的字体样式会随着系统配置字体的大小而变换,使得界面不太美观。而这个其实只要给一个参数就可以解决,但是整个app中用该组件的地方非常多,开发挨个替换的话,工作量很大...

React Native 下拉菜单容器实现

背景 本周算是把一个 react native 版的商家管理工具(iOS 版花花内嵌商家后台)完成,所以现在花一点时间来把其中一些值得记录下的东西整理一下写出来。 根据 UI 设计,很多页面都采...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

React Native开发专题介绍

今天我们继续来看一下原生模块的一些特性例如:回调方法函数,Promises,多线程,事件发送到JavaScript,监听生命周期事件,获取Activity Result等相关的特性。当前所讲解内容适配...

React Native专题

本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解。 刚创建的React Native交流8群:533435865  欢迎各位大牛...

React Native专题

注:转载于江清清的技术专栏 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下:  M...

React Native BUG(001)

Code : class runningProgram extends Component { state = { str_id: 'str_5km', str...

如何评价 React Native?

React native出来也快一周了,我写了几个demo,简单看了看objc代码并和开源前的我们的一些结论(见后文)交叉验证。简单地从前端工程师和系统整体角度说一下React native的特点和优...

我对 React Native 的理解和看法

React native出来也快一周了,我写了几个demo,简单看了看objc代码并和开源前的我们的一些结论(见后文)交叉验证。简单地从前端工程师和系统整体角度说一下React native的特点和优...

《React-Native系列》41、刨根问底Picker组件

最近做一个需求,需求里需要实现一个类似Picker组件的效果,如下图所示,页面布局很简单,上面一个View 包含两个Text或者Touch*组件,下面放置一个Picker组件。这个组件在app中已经存...

知乎上关于ReactNative的评论汇总(网友们有才哟...)

React native充分利用了Facebook的现有轮子,是一个很优秀的集成作品,并且我相信这个团队对前端的了解很深刻,否则不可能让Native code「退居二线」。对应到前端开发,整个系统结构...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)