TextInput--简单搜索功能和相关属性

         //仅做一下简单的记录            
             <TextInput
             style= {{height:50}}
                 placeholder="搜索。。。。"
                 // 默认选中
                 autoFocus
                 //纠错
                  autoCorrect={false}
                 // 默认字
                  defaultValue= "火星救援"
                 //是否可编辑 false不可编辑
                 editable={false}
                 //键盘类型 numeric数组键盘 email-address英文键盘 url网址 web-search回车键为go和前往
                 keyboardType="web-search"
                 //多行设置
                 multiline
                 //保密设置
                 secureTextEntry
                 //默认字体颜色
                 placeholderTextColor="#6435c9"
                 //清除按钮
                 clearButtonMode="while-editing"
                 //获取焦点修改内容时 删除上次输入的内容
                 clearTextOnFocus={true}
                //有输入内容时自动调用回车键，没有内容时禁用回车键
                 enablesReturnKeyAutomatically={true}
                 //回车键的样子
                 returnKeyType="go"
             //输入框的事件
                 //获取焦点事件
                 onFocus={() => console.log('onFoucs')}
                 //离开文本框时调用
                 onBlur={() => console.log('onBlur')}
                 //输入文字有改变时调用
                 onChange={() => console.log('onChange')}
                 //改变的文字
                 onChangeText={(text) => console.log(text)}
                 //结束编辑时调用
                 onEndEditing={() => console.log('onEndEditing')}
                 //点击回车键调用
                 onSubmitEditing={() => console.log('onSubmitEditing')}
 
             />

做一个简单的搜索功能（输入搜索内容，搜索到数据后跳转下一页面）5步：

import React, {Component} from 'react';

import {View, Text, TextInput} from 'react-native';//ActivityIndicatorIOS

//导入Main.js文件
import styles from '../Styles/Main';
//导入SearchResult.js
import SearchResult from './SearchResult';


class SearchForm extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
         //1.定义query为要搜索的数据
            query:''
        }
    }
    
    //4.获取查询数据
    fetchData(){
   const QUERY_URL =`http://api.douban.com/v2/movie/search?q=${this.state.query}`;
        
   fetch(QUERY_URL)
       .then(response =>response.json())
        .then(responseData =>{
          //在控制台打印数据
         //console.log(responseData);

         //5.查询到数据是 push到SearchResult界面，并将responseData.subjects数据传到下一页
         this.props.navigator.push({

             title:responseData.title,//SearchResult 页面的标题
             component:SearchResult,
             passProps:{
                 results:responseData.subjects
             }
         });

        })
            .done();


    }
    render(){

        return(
            <View style = {[styles.container,{paddingTop:60}]}>
             <View style = {{
                 paddingLeft :7,
                 paddingRight:7,
                 borderColor:"rgba(100, 53, 201, 0.1)",
                 borderBottomWidth:1,

             }}>
             <TextInput
                 //文本输入框设置
                 style= {{height:50}
                 placeholder="搜索。。。。"
                 // 默认选中
                 //autoFocus
                 //纠错
                  autoCorrect={false}
                 // 默认字
                 // defaultValue= "火星救援"
                 //是否可编辑 false不可编辑
                 //editable={false}
                 //键盘类型 numeric数组键盘 email-address英文键盘 url网址 web-search回车键为go和前往
                 keyboardType="web-search"
                 //多行设置
                 //multiline
                 //保密设置
                 //secureTextEntry
                 //默认字体颜色
                 placeholderTextColor="#6435c9"
                 //清除按钮
                 clearButtonMode="while-editing"
                 //获取焦点修改内容时 删除上次输入的内容
                 clearTextOnFocus={true}
                //有输入内容时自动调用回车键，没有内容时禁用回车键
                 enablesReturnKeyAutomatically={true}
                 //回车键的样子
                 returnKeyType="go"
             //输入框的事件
                 //获取焦点事件
                 // onFocus={() => console.log('onFoucs')}
                 //离开文本框时调用
                 //onBlur={() => console.log('onBlur')}
                 //输入文字有改变时调用
                 //onChange={() => console.log('onChange')}
                 //改变的文字
                 //onChangeText={(text) => console.log(text)}
                 //结束编辑时调用
                 //onEndEditing={() => console.log('onEndEditing')}
                 //点击回车键调用
                 //onSubmitEditing={() => console.log('onSubmitEditing')}


                 //2.拿到输入的文字
                 onChangeText={(query) =>{

                     this.setState({
                         query
                     });
                 }}

             //3.搜索时 获取数据
             onSubmitEditing={this.fetchData.bind(this)}
             />
             </View>
            </View>
        );
    }
}

export {SearchForm as default};