5
5
*/
6
6
7
7
import React , { Component } from "react" ;
8
- import { AppRegistry , StyleSheet , Text , TextInput , Button , View , DeviceEventEmitter , ToastAndroid } from "react-native" ;
8
+ import { AppRegistry , StyleSheet , Text , TextInput , View , DeviceEventEmitter , ToastAndroid } from "react-native" ;
9
+ import Button from "react-native-button" ;
9
10
import { Recognizer , Synthesizer } from "react-native-speech-iflytek" ;
10
11
11
12
class Example extends Component {
@@ -37,48 +38,54 @@ class Example extends Component {
37
38
38
39
render ( ) {
39
40
return (
40
- < View style = { styles . container } >
41
- < TextInput
42
- style = { { height : 40 , borderColor : "gray" , borderWidth : 1 } }
43
- onChangeText = { text => this . setState ( { text } ) }
44
- value = { this . state . text }
45
- />
46
- < Text
47
- onStartShouldSetResponder = { this . onRecordStart }
48
- onResponderRelease = { this . onRecordEnd }
41
+ < View style = { styles . container } onStartShouldSetResponder = { ( ) => true } >
42
+ < TextInput onChangeText = { text => this . setState ( { text } ) } value = { this . state . text } />
43
+ < Button
44
+ containerStyle = { styles . containerStyle }
45
+ style = { { color : "white" } }
46
+ onPress = { this . onRecordEnd }
47
+ onPressIn = { this . onRecordStart }
48
+ activeOpacity = { 0.8 }
49
49
onResponderTerminationRequest = { ( ) => true }
50
- onPress = { this . onRecordBtnPress }
51
- style = { styles . recordBtn }
50
+ onResponderTerminate = { this . onRecordCancel }
52
51
>
53
52
{ this . state . recordBtnText }
54
- </ Text >
55
- < Button title = "Tap to speak" onPress = { this . onSyntheBtnPress } />
53
+ </ Button >
54
+ < Button
55
+ containerStyle = { styles . containerStyle }
56
+ style = { { color : "white" } }
57
+ onPress = { this . onSyntheBtnPress }
58
+ activeOpacity = { 0.8 }
59
+ >
60
+ Tap to speak
61
+ </ Button >
56
62
</ View >
57
63
) ;
58
64
}
59
65
60
66
onRecordStart ( ) {
61
- ToastAndroid . show ( "开始录音 " , ToastAndroid . SHORT ) ;
67
+ ToastAndroid . show ( "Begin to record " , ToastAndroid . SHORT ) ;
62
68
this . setState ( { recordBtnText : "Release to stop" } ) ;
63
69
Recognizer . start ( ) ;
64
-
65
- // setTimeout(() => {
66
- // this.setState({ recordBtnText: "Press to record" });
67
- // Recognizer.stop();
68
- // }, 5000);
69
70
}
70
71
71
72
onRecordEnd ( ) {
72
- ToastAndroid . show ( "结束录音 " , ToastAndroid . SHORT ) ;
73
+ ToastAndroid . show ( "End to record " , ToastAndroid . SHORT ) ;
73
74
this . setState ( { recordBtnText : "Press to record" } ) ;
74
75
Recognizer . stop ( ) ;
75
76
}
76
77
78
+ onRecordCancel ( evt ) {
79
+ ToastAndroid . show ( "cancel" , ToastAndroid . SHORT ) ;
80
+ // setTimeout(() => {
81
+ // Recognizer.cancel();
82
+ // }, 500);
83
+ }
84
+
77
85
onSpeechRecognizerResult ( e ) {
78
86
if ( ! e . isLast ) {
79
87
return ;
80
88
}
81
- ToastAndroid . show ( e . result , ToastAndroid . SHORT ) ;
82
89
this . setState ( { text : e . result } ) ;
83
90
}
84
91
@@ -95,8 +102,7 @@ const styles = StyleSheet.create({
95
102
flex : 1 ,
96
103
justifyContent : "center" ,
97
104
alignItems : "stretch" ,
98
- paddingLeft : 5 ,
99
- paddingRight : 5
105
+ padding : 5
100
106
} ,
101
107
result : {
102
108
fontSize : 20 ,
@@ -111,6 +117,12 @@ const styles = StyleSheet.create({
111
117
borderWidth : 1 ,
112
118
borderRadius : 4 ,
113
119
borderColor : "#ccc"
120
+ } ,
121
+ containerStyle : {
122
+ backgroundColor : "#0275d8" ,
123
+ margin : 4 ,
124
+ padding : 4 ,
125
+ borderRadius : 2
114
126
}
115
127
} ) ;
116
128
0 commit comments