** Sample React Native App * https://github.com/facebook/react-native * @flow */ "use strict" import React,{Component} from 'react' import { AppRegistry,View,Text,Picker,StyleSheet } from 'react-native' var FirstData = [ '1','2','3','4','5','6' ] var SecondData = [ '11','22','33','44','55','66' ] var ThirdData = [ '111','222','333','444','555','666' ] // 读取本地json文件(城市选择器,后续更新) let jsonData = require('./area.json') class HelloWorld extends Component { constructor(props) { super(props) this.state={ firstValue: FirstData[0],secondValue: SecondData[0],thirdValue: ThirdData[0],} } updateFirstValue(language) { this.setState({ firstValue: language,}) } updateSecondValue(language) { this.setState({ secondValue: language,}) } updateThirdValue(language) { this.setState({ thirdValue: language,}) } renderPicker(key,i) { console.log(key,i) return <Picker.Item key={i} label={key} value={key} /> } render() { return ( <View style={styles.container}> <Text style={styles.text}>{this.state.firstValue+this.state.secondValue+this.state.thirdValue}</Text> <View style={styles.pickerViewContainer}> <Picker style={styles.pickerStyle} selectedValue={this.state.firstValue} onValueChange={(language) => this.updateFirstValue(language)}> {FirstData.map((key,i) => this.renderPicker(key,i))} </Picker> <Picker style={styles.pickerStyle} selectedValue={this.state.secondValue} onValueChange={(language) => this.updateSecondValue(language)}> {SecondData.map((key,i))} </Picker> <Picker style={styles.pickerStyle} selectedValue={this.state.thirdValue} onValueChange={(language) => this.updateThirdValue(language)}> {ThirdData.map((key,i))} </Picker> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',flexDirection: 'column',backgroundColor: '#F5FCFF' },text: { width: 200,height: 60,marginTop: 100,backgroundColor: 'white',justifyContent:'center',borderRadius: 5,},pickerViewContainer: { flex: 1,flexDirection: 'row',paddingTop: 30 },pickerStyle: { flex: 1,} }) AppRegistry.registerComponent('HelloWorld',() => HelloWorld); ****************************** 知识点 ******************************
1.实现多列:把 3 个picker放在同一个View上; 2.排列方式为: row ; 3.flex设置为: 1(各占三分之一并充满父组件);
****************************** 效果图 ******************************
原文地址:https://www.jb51.cc/react/303235.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。