RN 基础组件学习

1 TextInput

Simulator Screen Shot 2017年8月14日 上午11.51.37.png

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

class HelloWorld extends Component {
    render() {
    return (
        
            
        
    );
  }
}
class Search extends Component {
    constructor(props){
        super(props);
        this.state = {
            text:'请输入搜索条件',
        }
    }
    render(){
        return(
            
                
                    
                
                
                    搜索
                
            
        );
    }
}

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

    },
    flexDirection:{
        flexDirection:'row',
    },

    input:{
        height:45,
        borderColor:'red',
        borderWidth:1,
        marginLeft:10,
        paddingLeft:10,
        borderRadius:5,
    },
    btn:{
        width:45,
        marginLeft:-5,
        marginRight:5,
        backgroundColor:'#23BEFF',
        height:45,
        justifyContent:'center',
        alignItems:'center',
    },
    search:{
        color:'#fff',
        fontSize:15,
        fontWeight:'bold',
    },
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

2 Picker选择器
Picker组件是iOS和Android平台上原生选择组件的封装
View相关所有样式属性（例如：宽高、背景颜色、边距等）

onValueChange function 当选择器item被选择的时候进行调用。该方法被调用的时候会传入以下两个参数：itemValue，被选中item的属性值；itemPosition，被选中item的索引position值。

selectedValue：任何参数值，选择器选中的item所对应的值，该可以是一个字符串或者一个数字。
style pickerStyleType 这个传入style样式，用于设置picker样式风格
enabled bool 适于Android端，设置用户是否可以进行选择。

mode enum(‘dialog’,’dropdown’) 适于android平台，设置选择器的模式，可以控制用户点击picker样式风格。‘dialog’：该值为默认值，弹出一个模态dialog（弹出框）；‘dropdown’：以picker视图为基础，在该视图下面弹出下拉框

prompt string 设置picker的提示语（标题），在Android平台模式为dialog时，显示弹出框的标题。

Simulator Screen Shot 2017年8月15日 下午8.04.01.png

  this.setState({language:lang})}>

                
                
                
                

3 ViewPagerAndroid

555.gif

            
              第一页
            
            
              第二页
            
            
              第三页