説明なし

App.tsx 3.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. /**
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. *
  5. * @format
  6. * @flow
  7. */
  8. import * as React from 'react';
  9. import { StyleSheet, ScrollView, View, Text, StatusBar } from 'react-native';
  10. import {
  11. Header,
  12. LearnMoreLinks,
  13. Colors,
  14. DebugInstructions,
  15. ReloadInstructions,
  16. } from 'react-native/Libraries/NewAppScreen';
  17. // import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context'; in your app.
  18. import { SafeAreaProvider, useSafeArea } from '..';
  19. type ForceInsets = 'always' | 'never';
  20. const CompatSafeAreaView = ({
  21. forceInsets = {},
  22. children,
  23. }: {
  24. forceInsets?: {
  25. top?: ForceInsets;
  26. right?: ForceInsets;
  27. bottom?: ForceInsets;
  28. left?: ForceInsets;
  29. };
  30. children?: React.ReactNode;
  31. }) => {
  32. const insets = useSafeArea();
  33. const top = forceInsets.top === 'never' ? 0 : insets.top;
  34. const right = forceInsets.right === 'never' ? 0 : insets.right;
  35. const bottom = forceInsets.bottom === 'never' ? 0 : insets.bottom;
  36. const left = forceInsets.left === 'never' ? 0 : insets.left;
  37. return (
  38. <View
  39. style={{
  40. paddingTop: top,
  41. paddingRight: right,
  42. paddingBottom: bottom,
  43. paddingLeft: left,
  44. }}
  45. >
  46. {children}
  47. </View>
  48. );
  49. };
  50. const App = () => {
  51. const insets = useSafeArea();
  52. return (
  53. <>
  54. <StatusBar
  55. barStyle="dark-content"
  56. translucent={false}
  57. backgroundColor="transparent"
  58. />
  59. <ScrollView
  60. contentInsetAdjustmentBehavior="never"
  61. style={styles.scrollView}
  62. >
  63. <CompatSafeAreaView>
  64. <Header />
  65. <View style={styles.body}>
  66. <View style={styles.sectionContainer}>
  67. <Text style={styles.sectionTitle}>Step One</Text>
  68. <Text style={styles.sectionDescription}>
  69. Edit <Text style={styles.highlight}>App.js</Text> to change this
  70. screen and then come back to see your edits.
  71. </Text>
  72. </View>
  73. <View style={styles.sectionContainer}>
  74. <Text style={styles.sectionTitle}>See Your Changes</Text>
  75. <Text style={styles.sectionDescription}>
  76. <ReloadInstructions />
  77. </Text>
  78. </View>
  79. <View style={styles.sectionContainer}>
  80. <Text style={styles.sectionTitle}>Debug</Text>
  81. <Text style={styles.sectionDescription}>
  82. <DebugInstructions />
  83. </Text>
  84. </View>
  85. <View style={styles.sectionContainer}>
  86. <Text style={styles.sectionTitle}>Learn More</Text>
  87. <Text style={styles.sectionDescription}>
  88. Read the docs to discover what to do next:
  89. </Text>
  90. </View>
  91. <LearnMoreLinks />
  92. </View>
  93. </CompatSafeAreaView>
  94. </ScrollView>
  95. <View
  96. style={{
  97. position: 'absolute',
  98. top: 0,
  99. right: 0,
  100. left: 0,
  101. height: insets.top,
  102. backgroundColor: 'rgba(0, 0, 0, 0.3)',
  103. }}
  104. />
  105. </>
  106. );
  107. };
  108. const styles = StyleSheet.create({
  109. scrollView: {
  110. backgroundColor: Colors.lighter,
  111. },
  112. engine: {
  113. position: 'absolute',
  114. right: 0,
  115. },
  116. body: {
  117. backgroundColor: Colors.white,
  118. },
  119. sectionContainer: {
  120. marginTop: 32,
  121. paddingHorizontal: 24,
  122. },
  123. sectionTitle: {
  124. fontSize: 24,
  125. fontWeight: '600',
  126. color: Colors.black,
  127. },
  128. sectionDescription: {
  129. marginTop: 8,
  130. fontSize: 18,
  131. fontWeight: '400',
  132. color: Colors.dark,
  133. },
  134. highlight: {
  135. fontWeight: '700',
  136. },
  137. footer: {
  138. color: Colors.dark,
  139. fontSize: 12,
  140. fontWeight: '600',
  141. padding: 4,
  142. paddingRight: 12,
  143. textAlign: 'right',
  144. },
  145. });
  146. export default () => (
  147. <SafeAreaProvider>
  148. <App />
  149. </SafeAreaProvider>
  150. );