Nenhuma descrição

App.js 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. /**
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. *
  5. * @format
  6. * @flow
  7. */
  8. import React, {Component} from 'react';
  9. import {
  10. StyleSheet, Text, View, TouchableOpacity, TextInput,
  11. PermissionsAndroid
  12. } from 'react-native';
  13. import AgoraRTCView from './components/agora';
  14. const styles = StyleSheet.create({
  15. container: {
  16. flex: 1,
  17. justifyContent: 'center',
  18. alignItems: 'center',
  19. backgroundColor: '#F5FCFF',
  20. },
  21. welcome: {
  22. fontSize: 20,
  23. textAlign: 'center',
  24. margin: 10,
  25. },
  26. instructions: {
  27. textAlign: 'center',
  28. color: '#333333',
  29. marginBottom: 5,
  30. },
  31. button: {
  32. height: 44,
  33. paddingHorizontal:20,
  34. backgroundColor:'#6A71DD',
  35. borderRadius:10,
  36. justifyContent:'center',
  37. alignItems:'center',
  38. marginTop: 10
  39. }
  40. });
  41. type Props = {};
  42. export default class App extends Component<Props> {
  43. constructor(props) {
  44. super(props);
  45. this.state = {
  46. showLive: false,
  47. error: undefined,
  48. channelProfile: 1,
  49. videoProfile: 40,
  50. clientRole: 1,
  51. uid: 0,
  52. swapWidthAndHeight: true,
  53. channelName: null
  54. };
  55. }
  56. joinChannel = () => {
  57. this.setState({
  58. showLive: true
  59. })
  60. }
  61. onCancel = (error) => {
  62. this.setState({
  63. showLive: false,
  64. error: JSON.stringify(error)
  65. })
  66. }
  67. async requestCameraAndAudioAndroidPermission() {
  68. try {
  69. const granted = await PermissionsAndroid.requestMultiple([
  70. PermissionsAndroid.PERMISSIONS.CAMERA,
  71. PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
  72. ]);
  73. if (granted === PermissionsAndroid.RESULTS.GRANTED) {
  74. console.log('You can use the camera');
  75. } else {
  76. console.log('Camera permission denied');
  77. }
  78. } catch (err) {
  79. console.warn(err);
  80. }
  81. }
  82. componentWillMount () {
  83. this.requestCameraAndAudioAndroidPermission().then(_ => {});
  84. }
  85. render() {
  86. if (this.state.showLive) {
  87. console.log('channelName', this.state.channelName);
  88. return (<AgoraRTCView
  89. channelProfile={this.state.channelProfile}
  90. channelName={this.state.channelName}
  91. videoProfile={this.state.videoProfile}
  92. clientRole={this.state.clientRole}
  93. uid={this.state.uid}
  94. onCancel={this.onCancel}
  95. ></AgoraRTCView>);
  96. }
  97. return (
  98. <View style={styles.container}>
  99. {this.state.error ? <Text>Error Message: {this.state.error}</Text> : null}
  100. <TextInput
  101. style={{height: 40}}
  102. keyboardType='numeric'
  103. placeholder="Enter channelProfile (numeric)"
  104. onChangeText={(text) => {
  105. let matched = text.match(/\d+/g) && text.match(/\d+/g)[0]
  106. if (matched) {
  107. this.setState({channelProfile: +matched})
  108. }
  109. }
  110. } />
  111. <TextInput
  112. style={{height: 40}}
  113. keyboardType='numeric'
  114. placeholder="Enter videoProfile (numeric)"
  115. onChangeText={(text) => {
  116. let matched = text.match(/\d+/g) && text.match(/\d+/g)[0]
  117. if (matched) {
  118. this.setState({videoProfile: +matched})
  119. } }
  120. } />
  121. <TextInput
  122. style={{height: 40}}
  123. keyboardType='numeric'
  124. placeholder="Enter clientRole (numeric)"
  125. onChangeText={(text) => {
  126. let matched = text.match(/\d+/g) && text.match(/\d+/g)[0]
  127. if (matched) {
  128. this.setState({clientRole: +matched})
  129. }
  130. }
  131. } />
  132. <TextInput
  133. style={{height: 40}}
  134. placeholder="Enter channelName"
  135. onChangeText={
  136. (text) => {
  137. this.setState({channelName: text})
  138. }
  139. }
  140. />
  141. <TextInput
  142. style={{height: 40}}
  143. placeholder="Enter uid"
  144. onChangeText={
  145. (uid) => {
  146. this.setState({uid: +uid})
  147. }
  148. }
  149. />
  150. <TouchableOpacity
  151. style={styles.button}
  152. onPress={this.joinChannel}
  153. >
  154. <Text style={{color: "#fff"}}>join room</Text>
  155. </TouchableOpacity>
  156. </View>
  157. );
  158. }
  159. }