{"id":2450,"date":"2024-11-05T11:45:10","date_gmt":"2024-11-05T02:45:10","guid":{"rendered":"http:\/\/blog.moramcnt.com\/?p=2450"},"modified":"2024-11-05T11:46:37","modified_gmt":"2024-11-05T02:46:37","slug":"react-native-voice%ec%9d%8c%ec%84%b1%ec%9d%b8%ec%8b%9d-%ec%82%ac%ec%9a%a9","status":"publish","type":"post","link":"http:\/\/blog.moramcnt.com\/?p=2450","title":{"rendered":"React Native Voice(\uc74c\uc131\uc778\uc2dd) \uc0ac\uc6a9"},"content":{"rendered":"

I.\ubaa9\ud45c<\/strong><\/p>\n

\uc571\uc0c1\uc5d0\uc11c \uc8fc\uc18c\uac80\uc0c9\ub4f1\uc758 \ud654\uba74\uc5d0 \uc74c\uc131\uc778\uc2dd \uae30\ub2a5\uc744 \ucd94\uac00\ud558\uc5ec \ud3b8\ub9ac\uc131\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\ub824\uace0 \ud55c\ub2e4.<\/p>\n

 <\/p>\n

II. \uc5f0\uad6c\ubc0f \uac1c\ubc1c\ub0b4\uc6a9<\/strong><\/p>\n

1. \uc124\uce58<\/p>\n\n\n\n
npm i @react-native-voice\/voice –save<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

2. \uc0ac\uc6a9\ubc29\ubc95<\/p>\n

 <\/p>\n\n\n\n
import Voice from “@react-native-voice\/voice”;<\/p>\n

class AddrSearch extends PureComponent<\/p>\n

{<\/p>\n

constructor(props)<\/p>\n

{<\/p>\n

super(props);<\/p>\n

 <\/p>\n

this.state = {<\/p>\n

title\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : “”,<\/p>\n

voiceStat\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : “”<\/p>\n

};<\/p>\n

Voice.onSpeechStart\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = this.onSpeechStart;<\/p>\n

Voice.onSpeechEnd\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = this.onSpeechEnd;<\/p>\n

Voice.onSpeechError\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = this.onSpeechError;<\/p>\n

Voice.onSpeechRecognized\u00a0\u00a0\u00a0 = this.onSpeechRecognized;<\/p>\n

Voice.onSpeechResults\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = this.onSpeechResults;<\/p>\n

this.mClsVoiceTimer\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = null;<\/p>\n

}<\/p>\n

\/**<\/p>\n

* componentDidMount \uc774\ubca4\ud2b8<\/p>\n

*\/<\/p>\n

componentDidMount()<\/p>\n

{<\/p>\n

\/\/ \uc74c\uc11d\uc778\uc2dd \uc885\ub8cc \ud0c0\uc774\uba38<\/p>\n

this.mClsVoiceTimer = new mosaic.timer.TimerMgr();<\/p>\n

this.mClsVoiceTimer.setInterval(5000);\u00a0 \/\/ 5\ucd08\ud6c4\uc5d0 \uc74c\uc131\uc778\uc2dd \uc885\ub8cc<\/p>\n

this.mClsVoiceTimer.addTickHandler(()=> {<\/p>\n

console.log(“\ud0c0\uc774\uba38 \ub8e8\ud2f4”);<\/p>\n

this.doStopVoice();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ \uc74c\uc11d\uc778\uc2dd \uc885\ub8cc<\/p>\n

this.doAddrSearch();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ \uc8fc\uc18c \uac80\uc0c9<\/p>\n

});<\/p>\n

}<\/p>\n

\/**<\/p>\n

* componentWillUnmount \uc774\ubca4\ud2b8<\/p>\n

*\/<\/p>\n

componentWillUnmount()<\/p>\n

{<\/p>\n

Voice.destroy().then(Voice.removeAllListeners);<\/p>\n

if(this.mClsVoiceTimer != null)<\/p>\n

{<\/p>\n

this.mClsVoiceTimer.stop();<\/p>\n

this.mClsVoiceTimer = null;<\/p>\n

}<\/p>\n

}<\/p>\n

doAddrSearch = () => {<\/p>\n

 <\/p>\n

}<\/p>\n

doStartVoice = async() =><\/p>\n

{<\/p>\n

this.setState({ voiceStat: “\uc6d0\ud558\uc2dc\ub294 \uc8fc\uc18c\ub97c \ub9d0\uc500\ud574\uc8fc\uc138\uc694.” });<\/p>\n

this.mClsVoiceTimer.stop(); \/\/ \ud0c0\uc774\uba38 \uc885\ub8cc<\/p>\n

this.mClsVoiceTimer.start();<\/p>\n

try { await Voice.start(“ko-KR”); } catch (e) { console.error(e); }<\/p>\n

}<\/p>\n

doStopVoice = async() =><\/p>\n

{<\/p>\n

this.mClsVoiceTimer.stop(); \/\/ \ud0c0\uc774\uba38 \uc885\ub8cc<\/p>\n

try { await Voice.stop(); } catch (e) { console.error(e); }<\/p>\n

}<\/p>\n

onSpeechStart = (e) => {<\/p>\n

\/\/console.log(“onSpeechStart: “, e);<\/p>\n

this.setState({ voiceStat: “\uc74c\uc131\uc778\uc2dd\uc744 \uc2dc\uc791\ud558\uc600\uc2b5\ub2c8\ub2e4.” });<\/p>\n

};<\/p>\n

 <\/p>\n

onSpeechEnd = (e) => {<\/p>\n

console.log(“onSpeechEnd: “, e);<\/p>\n

this.setState({voiceStat : “” });<\/p>\n

};<\/p>\n

onSpeechError = (e) => {<\/p>\n

console.log(“onSpeechError: “, e);<\/p>\n

if(e.error.code != 5)<\/p>\n

{<\/p>\n

\/\/ {“error”: {“code”: “5”, “message”: “5\/Client side error”}} \uac00 \uc544\ub2cc \uacbd\uc6b0\ub9cc \ucd9c\ub825<\/p>\n

this.setState({ voiceStat : “\uc74c\uc131\uc778\uc2dd\uc5d0 \uc2e4\ud328\ud558\uc600\uc2b5\ub2c8\ub2e4. \ub2e4\uc2dc \uc2dc\ub3c4\ud558\uc5ec \uc8fc\uc138\uc694.”});<\/p>\n

}<\/p>\n

};<\/p>\n

onSpeechRecognized = (e) => {<\/p>\n

\/\/console.log(“onSpeechRecognized: “, e);<\/p>\n

this.setState({ voiceStat: “\uc74c\uc131\uc778\uc2dd\uc774 \ub418\uc5c8\uc2b5\ub2c8\ub2e4.” });<\/p>\n

};<\/p>\n

onSpeechResults = async(e) => {<\/p>\n

console.log(” \uc74c\uc131\uc778\uc2dd\uacb0\uacfc: “, e);<\/p>\n

let arrData = e.value;<\/p>\n

if(arrData.length > 0)<\/p>\n

{<\/p>\n

this.setState({voiceStat: “”, searchValue : arrData[0]}, ()=>{<\/p>\n

this.doAddrSearch();<\/p>\n

});<\/p>\n

}<\/p>\n

};<\/p>\n

\/**<\/p>\n

* \ud654\uba74 \ub80c\ub354<\/p>\n

*\/<\/p>\n

render()<\/p>\n

{<\/p>\n

const {title, voiceStat} = this.state<\/p>\n

return (<\/p>\n

<BottomSheetView style={baseStyle.bottomSheetBox}><\/p>\n

<View style={baseStyle.bottomSheetBoxBody}><\/p>\n

<View style={baseStyle.bottomSheetBoxBodyTitH3}><\/p>\n

<Text style={baseStyle.bottomSheetTitH3}><Text style={baseStyle.bottomSheetTitBoldH3}>\uc8fc\uc18c<\/Text>\uac80\uc0c9<\/Text><\/p>\n

<\/View><\/p>\n

<View style={{position:”relative”, width:”100%”, alignItems:”center”, paddingHorizontal:15, paddingTop:10, paddingBottom:5 }}><\/p>\n

<View style={{ width: “100%”, backgroundColor:”#f3f3f3″, borderRadius:10, justifyContent:”center”}}><\/p>\n

<TextInput<\/p>\n

style={{paddingVertical:13, paddingHorizontal:15, fontSize:fonts.getFontSize(15, this.props.appData), fontWeight:”400″, color: colors.PLACEHOLDER, fontFamily:fonts.GMARKET_MEDIUM }}<\/p>\n

numberOfLines={1}<\/p>\n

autoCorrect={false}<\/p>\n

underlineColorAndroid={“transparent”}<\/p>\n

placeholder={“\uc8fc\uc18c\ub098 \uac74\ubb3c \uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694”}<\/p>\n

placeholderTextColor={colors.PLACEHOLDER}<\/p>\n

returnKeyType={“search”}<\/p>\n

onChangeText={(strText) => this.setState({ searchValue: strText })}<\/p>\n

value={this.state.searchValue}<\/p>\n

onSubmitEditing={this.doAddrSearch}\/><\/p>\n

<TouchableOpacity style={{position:”absolute”, right: 35, paddingVertical:10, paddingHorizontal:10 }} activeOpacity={0.6} onPress={this.doAddrSearch}><\/p>\n

<IconFa6 name=”magnifying-glass” solid style={{fontSize: fonts.getFontSize(22, this.props.appData), fontWeight:”700″, opacity:0.7, color: colors.PLACEHOLDER}} \/><\/p>\n

<\/TouchableOpacity><\/p>\n

<TouchableOpacity style={{position:”absolute”, right: 0, paddingVertical:10, paddingHorizontal:10 }} activeOpacity={0.6} onPress={this.doStartVoice}><\/p>\n

<IconFa6 name=”microphone” solid style={{fontSize: fonts.getFontSize(22, this.props.appData), fontWeight:”700″, opacity:0.7, color: colors.DARK}} \/><\/p>\n

<\/TouchableOpacity><\/p>\n

<\/View><\/p>\n

<\/View><\/p>\n

<View style={{position:”relative”, width:”100%”, alignItems:”center”, paddingHorizontal:10, paddingTop:5, paddingBottom:5, }}><\/p>\n

<Text style={{color: colors.PRIMARY, padding:0, fontSize: fonts.getFontSize(13, this.props.appData), fontWeight:”bold”, fontFamily: fonts.NANUNM_REGULAR}}>{voiceStat}<\/Text><\/p>\n

<\/View><\/p>\n

<View style={{width: (width – 40), flex:1 }}><\/p>\n

<FlatList<\/p>\n

data={this.state.addrLocation}<\/p>\n

keyExtractor={item => item.addrSeq.toString()}<\/p>\n

renderItem={this.renderItem}<\/p>\n

contentContainerStyle={{backgroundColor: colors.WHITE}}<\/p>\n

ListEmptyComponent={this.renderNoDataItem}<\/p>\n

\/><\/p>\n

<\/View><\/p>\n

<\/View><\/p>\n

<\/BottomSheetView><\/p>\n

);<\/p>\n

}<\/p>\n

}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

III. \uacb0\ub860<\/strong><\/p>\n

\uac00\ub054\uc529\u00a0 onSpeechError\ub85c \uc624\ub958\uac00 \ub9ac\ud134\ub418\uc5b4, \uc544\ub798\uc640 \uac19\uc774 code\uac00 5\ubc88\uc778 \uacbd\uc6b0\ub294 \uc81c\uc678\ud558\uace0 \ubcf4\uc5ec\uc8fc\ub3c4\ub85d \ud558\uc600\ub2e4.<\/p>\n

{“error”: {“code”: “5”, “message”: “5\/Client side error”}}<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

I.\ubaa9\ud45c \uc571\uc0c1\uc5d0\uc11c \uc8fc\uc18c\uac80\uc0c9\ub4f1\uc758 \ud654\uba74\uc5d0 \uc74c\uc131\uc778\uc2dd \uae30\ub2a5\uc744 \ucd94\uac00\ud558\uc5ec \ud3b8\ub9ac\uc131\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\ub824\uace0 \ud55c\ub2e4.   II. \uc5f0\uad6c\ubc0f \uac1c\ubc1c\ub0b4\uc6a9 1. \uc124\uce58 npm i @react-native-voice\/voice –save 2. \uc0ac\uc6a9\ubc29\ubc95   import Voice from “@react-native-voice\/voice”; class AddrSearch extends PureComponent { constructor(props) { super(props);   this.state = { title\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : “”, voiceStat\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : “” }; Voice.onSpeechStart\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = this.onSpeechStart; Voice.onSpeechEnd\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = this.onSpeechEnd; Voice.onSpeechError\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 = this.onSpeechError; […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[321,2],"tags":[322],"class_list":["post-2450","post","type-post","status-publish","format-standard","hentry","category-react-natvie","category-2","tag-react-native-voice-"],"_links":{"self":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts\/2450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2450"}],"version-history":[{"count":1,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts\/2450\/revisions"}],"predecessor-version":[{"id":2451,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts\/2450\/revisions\/2451"}],"wp:attachment":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2450"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}