react-native-webview.git

App.tsx 3.5KB

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