【原创】东方耀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(