react-native-webview.git

App.tsx 3.9KB

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