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};