接續上篇，今天來做答題區以及判斷答題是否正確，主要會用到<TextInput>與<TouchableHighlight>標籤以及使用到Hook機制裡的全域變數～

useContext的使用

首先先把useContext與StoreContext匯入檔案裡。

import React, { useContext,useState} from "react";
import { StoreContext } from "../stores/progressstore";

利用useContext可存取全域狀態變數，先利用{ meState }取得全域狀態變數meState，再利用陣列寫法取得狀態變 數me。

const EditScreen = ({ navigation }) => {
  const { meState} = useContext(StoreContext);
  const [me, setMe] = meState;
}

輸入部分

現在來做輸入名字，首先先建立一個<TextInput>標籤，其參數包含placeholder、placeholderTextColor、maxLength、style、value、onChangeText、autoCorrect。placeholder為輸入文本之前顯示的提示字元，value為文本輸入顯示的值，onChangeText會偵測輸入事件，並將填寫的內容做設定。

//EditScreen.js部分程式
const EditScreen = ({ navigation }) => {
    const { meState } = useContext(StoreContext);
    const [me, setMe] = meState;
    
    //記錄更改的暱稱，確定更改後再將changename設定給全域變數
    const [changename, setchangename] = useState(me.name);
    
    return (
        <TextInput
           placeholder={me.name}
           placeholderTextColor="#747474"
           maxLength={8}
           style={styles.textbox}
           value={me.ans}
           onChangeText={(name) => setchangename(name)}
           autoCorrect={false}
        />
       
       //確認更改名稱按鈕
       <TouchableHighlight 
           onPress={() => {
               setMe({...me,name:changename});
               navigation.navigate('Home3');
           }} 
           style={styles.savebutton} underlayColor="#A7050E"
       >
           <Text style={styles.saveStyle}>Save</Text>
       </TouchableHighlight>
       
       //取消更改名稱按鈕
       <TouchableHighlight 
           onPress={() => {
               setchangename(me.name);
               navigation.navigate('Home3');
           }} 
           style={styles.cancelbutton} underlayColor="#A7050E"
       >
           <Text style={styles.cancelStyle}>Cancel</Text>
       </TouchableHighlight>
    )  

useContext就講到這裡，下篇開始會介紹基礎Hook機制的useEffect！