ReactNative: 浣跨敤閫夋嫨鍣ㄧ粍浠禤icker缁勪欢
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ReactNative: 浣跨敤閫夋嫨鍣ㄧ粍浠禤icker缁勪欢相关的知识，希望对你有一定的参考价值。
鏍囩锛?a href='http://www.mamicode.com/so/1/hang' title='hang'>hang 鏌ヨ val hit export picker justify script 妯″紡
涓€銆佺畝浠?/strong>
鏈郴鍒楀崥瀹㈠凡缁忎粙缁嶈繃浜嗘棩鏈熼€夋嫨鍣ㄧ殑浣跨敤锛屾棩鏈熼€夋嫨鍣ㄦ槸楂樺害灏佽鐨勭粍浠讹紝寮€鍙戣€呭彲浠ラ€夋嫨鏈€鍘熷鐨勯€夋嫨鍣ㄧ粍浠禤icker缁勪欢杩涜瀹氬埗锛屽畠鏄法骞冲彴鐨勭粍浠躲€侾icker缁勪欢闇€瑕侀厤鍚圥icker.Item缁勪欢涓€璧蜂娇鐢ㄣ€侾icker.Item缁勪欢鏄疨icker缁勪欢鐨勫瓙椤癸紝鐢ㄦ潵璁剧疆Picker缁勪欢鍊肩殑銆侾icker.Item缁勪欢鍙互宓屽澶氫釜Picker.Item缁勪欢銆?/span>
浜屻€丳icker缁勪欢API
Picker缁勪欢鎻愪緵鐨勯兘鏄潤鎬佸睘鎬э紝鍒嗘瀽姣忎竴涓睘鎬х殑浣滅敤濡備笅鎵€绀猴細
//閫夋嫨鍣ㄦ牱寮?/span> style: pickerStyleType //閫変腑鐨勫瓙椤圭殑鍊?/span> selectedValue: React.PropTypes.any, //褰撳垏鎹㈠瓙椤规椂璋冪敤 onValueChange: React.PropTypes.func //閫夋嫨鍣ㄦ槸鍚﹁兘澶熶氦浜? 浠呴檺瀹夊崜浣跨敤 enabled: React.PropTypes.bool //閫夋嫨鍣ㄦā寮忥紝鏋氫妇锛歞ialog 瀵硅瘽妗? dropdown锛氫笅钀? 浠呴檺瀹夊崜浣跨敤 mode: React.PropTypes.oneOf([鈥?/span>dialog鈥?/span>, 鈥?/span>dropdown鈥?/span>]) //瀛愰」鐨勬牱寮忥紝浠呴檺ios浣跨敤 itemStyle: itemStylePropType //鍦ㄥ璇濇妯″紡涓嬪湪android涓婄敤浣滃璇濇鐨勬爣棰? 浠呴檺瀹夊崜浣跨敤 prompt: React.PropTypes.string //缁勪欢鍞竴鏍囪瘑锛屼究浜庢煡璇㈠埌璇ョ粍浠?/span> testID: React.PropTypes.string
涓夈€丳icker.Item缁勪欢API
Picker.Item缁勪欢鎻愪緵鐨勯兘鏄睘鎬у彧鏈夊嚑涓紝浣嗘槸闈炲父甯哥敤锛屽垎鏋愭瘡涓€涓睘鎬х殑浣滅敤濡備笅鎵€绀猴細
//姝ら」鐩鏄剧ず鐨勬枃瀛?/span> label: React.PropTypes.string.isRequired //閫夋嫨姝ら」鐩悗锛屼紶閫掔粰閫夋嫨鍣ㄧ殑onValueChange鍥炶皟鐨勫€笺€?鍙互鏄瓧绗︿覆鎴栨暣鏁般€?/span> value: React.PropTypes.any //姝ら」鐩鏄剧ず鐨勬枃瀛楃殑棰滆壊锛屼粎闄愬畨鍗撲娇鐢?/span> color: ColorPropType //鍞竴鏍囪瘑 testID: React.PropTypes.string
鍥涖€佷娇鐢?/strong>
鐪嬩簡涓€涓嬫枃妗ｏ紝绠€鍗曞疄鐜颁竴涓嬶紝绀轰緥濡備笅锛?/span>
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 鈥?/span>react鈥?/span>; import { AppRegistry, StyleSheet, View, Picker } from 鈥?/span>react-native鈥?/span>; export default class ReactNativeDemo extends Component { //榛樿閫変腑鐨勫€?/span> state = { language:鈥?/span>swift鈥?/span> }; render() { return ( <View style={[styles.flex,styles.bgColor,styles.center]}> <Picker style={{width:200, height:50}} selectedValue={this.state.language} onValueChange={(lang) => this.setState({language: lang})}> <Picker.Item label="Java" value="java" /> <Picker.Item label="javascript" value="js" /> <Picker.Item label="Swift" value="swift" /> <Picker.Item label="Objective-C" value="oc" /> </Picker> </View> ); } } const styles = StyleSheet.create({ flex: { flex: 1 }, bgColor: { backgroundColor: 鈥?/span>white鈥?/span> }, center: { alignItems: 鈥?/span>center鈥?/span>, justifyContent: 鈥?/span>center鈥?/span>, } }); AppRegistry.registerComponent(鈥?/span>ReactNativeDemo鈥?/span>, () => ReactNativeDemo);
以上是关于ReactNative: 浣跨敤閫夋嫨鍣ㄧ粍浠禤icker缁勪欢的主要内容，如果未能解决你的问题，请参考以下文章