React-Native之旅Day4 Text Input

今天就來看看 Reac-Native 如何利用核心元件來處理文字輸入

TextInput 帶有一個 onChangeText 的 prop

這個 prop 接受一個 Funciton 可在文字變化時被呼叫

以及在文字送出時呼叫的 onSubmitEditing

這裡的範例會將用戶輸入的文字用空格格開並將文字轉換成 🍕

// 1
import
React
from
'react'
import
Text
TextInput
View
from
'react-native'

const
PizzaTranslator

  // 2
  const
useState
''
  return
    
       word && '🍕').join(' ')}

Import Text
因為 text 是會改變的，因此這裡使用 state 儲存
在元件內將觀察輸入的文字並更改 state
在 Text 元件內根據 text 顯示轉換完成的資訊