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 (
        <View style={styles.flex}>
            <Search></Search>
        </View>
    );
  }
}
class Search extends Component {
    constructor(props){
        super(props);
        this.state = {
            text:'请输入搜索条件',
        }
    }
    render(){
        return(
            <View style={[styles.flex,styles.flexDirection]}>
                <View style={styles.flex}>
                    <TextInput
                        style={styles.input}
                        returnKeyType="done"
                        placeholder={this.state.text}
                    />
                </View>
                <View style={styles.btn}>
                    <Text style={styles.search}>搜索</Text>
                </View>
            </View>
        );
    }
}

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

 <Picker selectedValue={this.state.language}
                        onValueChange={(lang) => this.setState({language:lang})}>

                <Picker.Item label="iOS" value={'iOS'}></Picker.Item>
                <Picker.Item label="Android" value={'Android'}></Picker.Item>
                <Picker.Item label="web" value={'web'}></Picker.Item>
                </Picker>

3 ViewPagerAndroid

555.gif

<ViewPagerAndroid
            initialPage={0}
            style={styles.flex}>
            <View style={styles.pageStyle}>
              <Text style={styles.text}>第一页</Text>
            </View>
            <View style={styles.pageStyle}>
              <Text style={styles.text}>第二页</Text>
            </View>
            <View style={styles.pageStyle}>
              <Text style={styles.text}>第三页</Text>
            </View>
          </ViewPagerAndroid>