【原创】东方耀reactnative 视频16，17之-TextInput组件

小米手机遇到通用问题

react-native run-android 运行生成 android|app|build|outputs|apk

生成的apk丢到小米手机上

（用手机qq接收apk）然后安装

文本输入框 TextInput 基本组件，自动补全的search功能

调试apk目录

project|android|app|build|outputs|apk

小米已启用，允许其他应用显示

有可能无法联接到服务器，手机动动，在菜单中的device上配置ip

主要属性和事件如下:

autoCapitalize, : none,sentences words characters,当用户输入时，用于提示

placeholder:占位符，在输入前显示的文本内容

value: 文本输入框的default值

placeholderTextColor:占位符文本色

password: boolean类型，true表示密码输入显示＊＊

multiline:多行输入

btn:{

width:45,

marginLeft:-5,//这个负数很有讲究，比如baidu.com首页那个按钮一定要占用一点才不会显示出缺陷那一块来

marginRight:5,

backgroundColor:’#23BEFF’,

height:45,

justifyContent:’center’,

alignItems:’center’,

},

17 加上自动提示功能

通常，完成此功能要一个search服务，返回n条结果，并将其展示出来，这里我们用静态数据模拟出来

>

/**

* Sample React Native App

* https://github.com/facebook/react-native

*/

‘use strict’;

import React, { Component } from ‘react’;

import {

AppRegistry,

StyleSheet,

PixelRatio,

ScrollView,

Text,

TextInput,

View

} from ‘react-native’;

var onePT = 1 / PixelRatio.get();

class demo2 extends Component {

render() {

return (

<View style={[styles.flex,styles.topStatus]}>

<Search></Search>

</View>

);

}

}

class Search extends Component {

constructor(props){

super(props);

this.state = {

show:false,

value:null,

};

}

hide(val){

this.setState(

{

show: false,

value: val,

}

);

}

getValue(text){

this.setState({
show: true,
value: text,
});

}

render(){

return(