React Native 之 TextInput（多個語法知識）

RN中TextInput（輸入框）使用總結，RN中文網上寫的例子涉及到諸多小的知識點，在此做一一解析。

"use strict"

import React, { Component } from 'react';
import {
  AppRegistry, // 注冊組件,是應用的JS運行入口
  Text,        // 文本組件(類似於IOS的UILabel)
  TextInput,
  View         // 視圖組件
} from 'react-native';

class HelloWorld extends Component {

    constructor(props) {
        super(props);
        this.state = {'text': ''};
    }

    endEditing(param) {
        alert(param)
    }

    submiteContext(param) {
        alert(param)
    }

  render() { 
 
    return (

        <View style={{flex: 1, backgroundColor: 'gray'}}>
            <TextInput
                style={{height: 40, borderStyle: 'solid', marginTop: 100, marginLeft: 30, marginRight: 30}}
                placeholder='輸入內容'
                keyboardType={'default'} // 默認鍵盤類型
                autoCapitalize='none' // 取消首字母大寫
                keyboardAppearance={'light'} // 鍵盤演示
                returnKeyType={'done'}  // 代替 returnKeyType
                secureTextEntry={false} // 輸入內容顯示黑色圓點
                clearButtonMode={'while-editing'} // 輸入框右邊 x 按鈕
                clearTextOnFocus={true} // 再次輸入清空之前內容
                onChangeText={(text) => this.setState({text})} // onChangeText 文本變化是會調用(處於edite狀態)
                onEndEditing={(event) => this.endEditing( // 退出鍵盤
                    'onEndEditing text: ' + event.nativeEvent.text
                )}
                onSubmitEditing={(event) => this.submiteContext( // 數據提交
                    'onSubmitEditing text: ' + event.nativeEvent.text
                )}
            />
            <Text style={{padding:10, fontSize: 30, color: 'red'}}>
                {this.state.text.split(' ').map((word) => word && '哈哈').join('插入')}

            </Text>
            <Text style={{fontSize: 20, color: 'blue', marginLeft: 30, marginRight: 30}}>
                {this.state.text.split(' ')[this.state.text.split(' ').length - 1]}
            </Text>
            <Text style={{color: 'white'}}>
                {this.state.text.split(' ').map((param) => param && "哈哈")}
            </Text>
        </View>
    );
  }
}

1.split() 方法用於把一個字符串分割成字符串數組。
  str.split(' ' );是以空格拆分，差分后，行程結果的數組，數組的元素都為字符串。
  str.split(' ',3); 是以空格拆分，拆分后，只取數組length為3的數組。
例如： this.state.text.split('#')[this.state.text.split('#').length - 1] 用 ‘#’ 字符拆分字符串，並取得數組的最后一個元素

2.map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。
map() 方法按照原始數組元素順序依次處理元素。
注意： map() 不會對空數組進行檢測。
注意： map() 不會改變原始數組。

3.運算符 && || 
在運算過程中，首先js 會將 && 和|| 兩邊的值轉成Boolean 類型，然后再算值 ，
&&運算如果返回true，則取后面的值，如果|| 返回true,則取前面的值 ，
而其中數值轉換成boolean 的規則 是： 對象、非零整數、非空字符串返回true,其它為false ;
例如：該邏輯運算符支持短路原則 參考：http://blog.csdn.net/xiaoshuode/article/details/51612423
 var a = “” || null || 3 || 4 —-> var a = false || false || true || true 結果為true 則返回第一個true,即是3
分析： ||  這個運算符 “一真為真”，結果返回true，取前面的true（第一個true），即是 3

var b = 4 && 5 && null && 0 ——> var b = true && true && false && false 結果是false 則返回第一個false 即是null .
分析： && 這個運算符  “一假為假”，結果返回false，取前面的false（第一個false），即是 null

var c = 5 && 6 ----->var c = true && true 結果為ture，則返回后面的ture，即是 6

4.箭頭函數(param) => param && "哈哈"
箭頭函數實際上是在這里定義了一個臨時的函數，箭頭函數的箭頭=>之前是一個空括號、單個的參數名、或用括號括起的多個參數名，而箭頭之后可以是一個表達式（作為函數的返回值），或者是用花括號括起的函數體（需要自行通過return來返回值，否則返回的是undefined）。

()=>1 v=>v+1 (a,b)=>a+b ()=>{ alert("foo"); } e=>{ if (e == 0){ return 0; } return 1000/e; }


5.join() 方法用於把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。
 語法
 arrayObject搜索.join(separator)

 參數、描述
 separator 可選。指定要使用的分隔符。如果省略該參數，則默認使用逗號作為分隔符。
 返回值
 返回一個字符串。該字符串是通過把 arrayObject 的每個元素轉換為字符串，然后把這些字符串連接起來，在兩個元素之間插入separator 字符串而生成的。

6.創建函數及調用：參考以上用法