react-native-webview.git

App.tsx 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. import React, {Component} from 'react';
  2. import {
  3. StyleSheet,
  4. SafeAreaView,
  5. Text,
  6. TouchableOpacity,
  7. View,
  8. Keyboard,
  9. Button,
  10. Platform,
  11. } from 'react-native';
  12. import Alerts from './examples/Alerts';
  13. import Scrolling from './examples/Scrolling';
  14. import Background from './examples/Background';
  15. import Uploads from './examples/Uploads';
  16. import Injection from './examples/Injection';
  17. const TESTS = {
  18. Alerts: {
  19. title: 'Alerts',
  20. testId: 'alerts',
  21. description: 'Alerts tests',
  22. render() {
  23. return <Alerts />;
  24. },
  25. },
  26. Scrolling: {
  27. title: 'Scrolling',
  28. testId: 'scrolling',
  29. description: 'Scrolling event test',
  30. render() {
  31. return <Scrolling />;
  32. },
  33. },
  34. Background: {
  35. title: 'Background',
  36. testId: 'background',
  37. description: 'Background color test',
  38. render() {
  39. return <Background />;
  40. },
  41. },
  42. Uploads: {
  43. title: 'Uploads',
  44. testId: 'uploads',
  45. description: 'Upload test',
  46. render() {
  47. return <Uploads />;
  48. },
  49. },
  50. Injection: {
  51. title: 'Injection',
  52. testId: 'injection',
  53. description: 'Injection test',
  54. render() {
  55. return <Injection />;
  56. },
  57. },
  58. };
  59. type Props = {};
  60. type State = {restarting: boolean, currentTest: Object};
  61. export default class App extends Component<Props, State> {
  62. state = {
  63. restarting: false,
  64. currentTest: TESTS.Alerts,
  65. };
  66. _simulateRestart = () => {
  67. this.setState({restarting: true}, () => this.setState({restarting: false}));
  68. };
  69. _changeTest = testName => {
  70. this.setState({currentTest: TESTS[testName]});
  71. };
  72. render() {
  73. const {restarting, currentTest} = this.state;
  74. return (
  75. <SafeAreaView style={styles.container}>
  76. <TouchableOpacity
  77. style={styles.closeKeyboardView}
  78. onPress={() => Keyboard.dismiss()}
  79. testID="closeKeyboard"
  80. />
  81. <TouchableOpacity
  82. testID="restart_button"
  83. onPress={this._simulateRestart}
  84. style={styles.restartButton}
  85. activeOpacity={0.6}>
  86. <Text>Simulate Restart</Text>
  87. </TouchableOpacity>
  88. <View style={styles.testPickerContainer}>
  89. <Button
  90. testID="testType_alerts"
  91. title="Alerts"
  92. onPress={() => this._changeTest('Alerts')}
  93. />
  94. <Button
  95. testID="testType_scrolling"
  96. title="Scrolling"
  97. onPress={() => this._changeTest('Scrolling')}
  98. />
  99. <Button
  100. testID="testType_background"
  101. title="Background"
  102. onPress={() => this._changeTest('Background')}
  103. />
  104. <Button
  105. testID="testType_injection"
  106. title="Injection"
  107. onPress={() => this._changeTest('Injection')}
  108. />
  109. {Platform.OS === 'android' && <Button
  110. testID="testType_uploads"
  111. title="Uploads"
  112. onPress={() => this._changeTest('Uploads')}
  113. />}
  114. </View>
  115. {restarting ? null : (
  116. <View
  117. testID={`example-${currentTest.testId}`}
  118. key={currentTest.title}
  119. style={styles.exampleContainer}>
  120. <Text style={styles.exampleTitle}>{currentTest.title}</Text>
  121. <Text style={styles.exampleDescription}>
  122. {currentTest.description}
  123. </Text>
  124. <View style={styles.exampleInnerContainer}>
  125. {currentTest.render()}
  126. </View>
  127. </View>
  128. )}
  129. </SafeAreaView>
  130. );
  131. }
  132. }
  133. const styles = StyleSheet.create({
  134. container: {
  135. flex: 1,
  136. backgroundColor: '#F5FCFF',
  137. padding: 8,
  138. },
  139. exampleContainer: {
  140. padding: 16,
  141. backgroundColor: '#FFF',
  142. borderColor: '#EEE',
  143. borderTopWidth: 1,
  144. borderBottomWidth: 1,
  145. flex: 1,
  146. },
  147. exampleTitle: {
  148. fontSize: 18,
  149. },
  150. exampleDescription: {
  151. color: '#333333',
  152. marginBottom: 16,
  153. },
  154. exampleInnerContainer: {
  155. borderColor: '#EEE',
  156. borderTopWidth: 1,
  157. paddingTop: 10,
  158. flex: 1,
  159. },
  160. restartButton: {
  161. padding: 6,
  162. fontSize: 16,
  163. borderRadius: 5,
  164. backgroundColor: '#F3F3F3',
  165. alignItems: 'center',
  166. justifyContent: 'center',
  167. alignSelf: 'flex-end',
  168. },
  169. closeKeyboardView: {
  170. width: 5,
  171. height: 5,
  172. },
  173. testPickerContainer: {
  174. flexDirection: 'row',
  175. flexWrap: 'wrap',
  176. },
  177. });