説明なし

App.tsx 5.0KB

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