• 16、React Native实战之TextInput组件


    文本输入框:基本组件 自动补全的搜索功能

    TextInput的主要属性和事件如下:

    1. autoCapitalize:枚举类型,可选值有none  sentences  words  characters当用户输入时,用于提示
    2. placeholder:占位符,在输入前显示文本内容
    3. value:文本输入框的默认值
    4. placeholderTextColor:占位符文本的颜色
    5. password:boolean类型true表示密码输入显示*
    6. multiline:多行输入
    7. editable:文本框是否可输入
    8. autofocus:自动聚焦
    9. clearButtonMode:枚举类型,never while-editing unless-editing always用于显示消除按钮
    10. maxLength:能够输入的最长字符数
    11. enablesReturnKeyAutomatically:如果为true表示没有文本时键盘是不能有返回键的,其默认值为false
    12. retrunKeyType:枚举类型default go google join next route search send yahoo done emergency-call表示软键盘返回显示的字符串
    13. secureTextEntry:隐藏输入内容,默认值为false
    14. onChangeText:当文本输入框的内容变化时,调用改函数;onChangeText接收一个文本的参数对象
    15. onChange:当文本变化时,调用改函数
    16. onBlur:失去焦点触发事件
    17. onFocus:获得焦点时触发事件
    18. onSubmitEditing:当结束编辑后,点击键盘的提交按钮触发该事件

    搜索框

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     */
    'use strict';
    
    import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
    TextInput,
        View
        } from 'react-native';
    
    
    class ZhangqfTest extends Component {
        render() {
    
            return (
    
                <View style={[styles.flex,styles.topStatus]}>
    
                    <Search></Search>
    
                </View>
    
            );
        }
    }
    
    class Search extends Component {
        render(){
            return(
                <View style={[styles.flex,styles.flexDirection]}>
                    <View style={[styles.flex,styles.input]}>
    
                        <TextInput  returnKeyType="search" />
    
                    </View>
    
    
                    <View style={styles.btn}>
                        <Text style={styles.search}>搜索</Text>
                    </View>
                </View>
    
            );
        }
    }
    
    
    const styles = StyleSheet.create({
    
        flex:{
            flex:1,
    
        },
        flexDirection:{
            flexDirection:'row',
        },
        topStatus:{
            marginTop:25,
        },
        input:{
            height:45,
            borderColor:'red',
            borderWidth:1,
            marginLeft:10,
            paddingLeft:10,
            borderRadius:5,
    
        },
        btn:{
            45,
            marginLeft:-5,
            marginRight:5,
            backgroundColor:'#23BEFF',
            height:45,
            justifyContent:'center',
            alignItems:'center',
        },
        search:{
            color:'#fff',
            fontSize:15,
            fontWeight:'bold',
        },
    
    
    });
    
    AppRegistry.registerComponent('ZhangqfTest', () => ZhangqfTest);

  • 相关阅读:
    Android 如何在自己的应用中模拟Home键
    ComboBox添加Item
    修复JSCRIPT
    几天没用TFS!挂了!
    简单的上传图片并生成缩略图
    上传图片时中文路径的问题
    获取DataList和Repeater里的控件
    MIME 类型列表
    STL注意
    MFC下的MessageBox使用_附带CBUTTON
  • 原文地址:https://www.cnblogs.com/zhangqf/p/6505692.html
Copyright © 2020-2023  润新知