Keine Beschreibung

App.js 3.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  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. } from 'react-native';
  12. import AgoraRTCView from './components/agora';
  13. const styles = StyleSheet.create({
  14. container: {
  15. flex: 1,
  16. justifyContent: 'center',
  17. alignItems: 'center',
  18. backgroundColor: '#F5FCFF',
  19. },
  20. welcome: {
  21. fontSize: 20,
  22. textAlign: 'center',
  23. margin: 10,
  24. },
  25. instructions: {
  26. textAlign: 'center',
  27. color: '#333333',
  28. marginBottom: 5,
  29. },
  30. button: {
  31. height: 44,
  32. paddingHorizontal:20,
  33. backgroundColor:'#6A71DD',
  34. borderRadius:10,
  35. justifyContent:'center',
  36. alignItems:'center',
  37. marginTop: 10
  38. }
  39. });
  40. type Props = {};
  41. export default class App extends Component<Props> {
  42. constructor(props) {
  43. super(props);
  44. this.state = {
  45. showLive: false,
  46. error: undefined,
  47. channelProfile: 1,
  48. videoProfile: 40,
  49. clientRole: 1,
  50. uid: 0,
  51. swapWidthAndHeight: true,
  52. channelName: null
  53. };
  54. }
  55. joinChannel = () => {
  56. this.setState({
  57. showLive: true
  58. })
  59. }
  60. onCancel = (error) => {
  61. this.setState({
  62. showLive: false,
  63. error: JSON.stringify(error)
  64. })
  65. }
  66. render() {
  67. if (this.state.showLive) {
  68. console.log('channelName', this.state.channelName);
  69. return (<AgoraRTCView
  70. channelProfile={this.state.channelProfile}
  71. channelName={this.state.channelName}
  72. videoProfile={this.state.videoProfile}
  73. clientRole={this.state.clientRole}
  74. uid={this.state.uid}
  75. onCancel={this.onCancel}
  76. ></AgoraRTCView>);
  77. }
  78. return (
  79. <View style={styles.container}>
  80. {this.state.error ? <Text>Error Message: {this.state.error}</Text> : null}
  81. <TextInput
  82. style={{height: 40}}
  83. keyboardType='numeric'
  84. placeholder="Enter channelProfile (numeric)"
  85. onChangeText={(text) => {
  86. let matched = text.match(/\d+/g) && text.match(/\d+/g)[0]
  87. if (matched) {
  88. this.setState({channelProfile: +matched})
  89. }
  90. }
  91. } />
  92. <TextInput
  93. style={{height: 40}}
  94. keyboardType='numeric'
  95. placeholder="Enter videoProfile (numeric)"
  96. onChangeText={(text) => {
  97. let matched = text.match(/\d+/g) && text.match(/\d+/g)[0]
  98. if (matched) {
  99. this.setState({videoProfile: +matched})
  100. } }
  101. } />
  102. <TextInput
  103. style={{height: 40}}
  104. keyboardType='numeric'
  105. placeholder="Enter clientRole (numeric)"
  106. onChangeText={(text) => {
  107. let matched = text.match(/\d+/g) && text.match(/\d+/g)[0]
  108. if (matched) {
  109. this.setState({clientRole: +matched})
  110. }
  111. }
  112. } />
  113. <TextInput
  114. style={{height: 40}}
  115. placeholder="Enter channelName"
  116. onChangeText={
  117. (text) => {
  118. this.setState({channelName: text})
  119. }
  120. }
  121. />
  122. <TextInput
  123. style={{height: 40}}
  124. placeholder="Enter uid"
  125. onChangeText={
  126. (uid) => {
  127. this.setState({uid: +uid})
  128. }
  129. }
  130. />
  131. <TouchableOpacity
  132. style={styles.button}
  133. onPress={this.joinChannel}
  134. >
  135. <Text style={{color: "#fff"}}>join room</Text>
  136. </TouchableOpacity>
  137. </View>
  138. );
  139. }
  140. }