首页 > 技术文章 > React Native控件之Picker

allenxieyusheng 2016-08-16 09:58 原文

1.

import React,{Component}from 'react';
import {
  AppRegistry,

  StyleSheet,
  Text,
  View,
  Picker,
} from 'react-native';


var PickerDemo = React.createClass({
   getInitialState: function() {
    return {
      language: '',
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text >
          Picker选择器实例
        </Text>
        <Picker
          style={{width:200}}
          selectedValue={this.state.language}
          onValueChange={(value) => this.setState({language: value})}>
          <Picker.Item label="Java" value="java" />
          <Picker.Item label="JavaScript" value="javaScript" />
        </Picker>
        <Text>当前选择的是:{this.state.language}</Text>
      </View>
    );
  }
});
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
AppRegistry.registerComponent('Allen', () => PickerDemo)

  

推荐阅读