React Native学习之Picker组件和箭头函数

本组件可以在iOS和Android上渲染原生的选择器（Picker）

Picker组件的属性

• mode：选择器的样式，包括dialog、dropdown

箭头函数

//无参数 => 函数体
() => {
    return 0;
}

//带参数 => 函数体
(param1, param2) => {
    return 0;
}

//带参数 => 表达式
param => this.setState({language: param})

//无参数 => 变量
() => value

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    PixelRatio,
    Text,
    Image,
    TouchableOpacity,
    Picker,
    View
} from 'react-native';

class RNAPP extends Component {
    constructor(props) {
        super(props);
        this.state = {
            language: null
        };
    }

    //箭头函数 ES6语法

    render() {
        return (
            <View style={[styles.flex, {marginTop:45}]}>
                <Text>Picker组件</Text>

                <Picker
                    selectedValue={this.state.language}
                    onValueChange={lang => this.setState({language: lang})}
                    mode="dialog"
                    style={{color:'#f00'}}
                    >

                    <Picker.Item label="Java" value="java" />
                    <Picker.Item label="JavaScript" value="js" />
                    <Picker.Item label="C语言" value="c" />
                    <Picker.Item label="PHP开发" value="php" />
                    <Picker.Item label="Swift" value="swift" />
                </Picker>

                <Text>{this.state.language}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex:{
        flex:1,
    },
});

AppRegistry.registerComponent('RNAPP', () => RNAPP);