暂无描述

App.tsx 1.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. import * as React from 'react';
  2. import { View, Text, StatusBar, Button } from 'react-native';
  3. // import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context'; in your app.
  4. import { SafeAreaProvider, useSafeArea } from '../src';
  5. const Screen = () => {
  6. const insets = useSafeArea();
  7. return (
  8. <>
  9. <StatusBar
  10. barStyle="dark-content"
  11. translucent
  12. backgroundColor="transparent"
  13. />
  14. <View
  15. style={{
  16. flex: 1,
  17. backgroundColor: 'red',
  18. paddingTop: insets.top,
  19. paddingLeft: insets.left,
  20. paddingBottom: insets.bottom,
  21. paddingRight: insets.right,
  22. }}
  23. >
  24. <View
  25. style={{
  26. flex: 1,
  27. backgroundColor: 'white',
  28. alignItems: 'center',
  29. justifyContent: 'center',
  30. }}
  31. >
  32. <Text>Insets: {JSON.stringify(insets, null, 2)}</Text>
  33. </View>
  34. </View>
  35. </>
  36. );
  37. };
  38. export default function App() {
  39. const [refreshKey, setRefreshKey] = React.useState(1);
  40. return (
  41. <View key={refreshKey} style={{ flex: 1 }}>
  42. <SafeAreaProvider>
  43. <Screen />
  44. <Button
  45. title="Refresh"
  46. onPress={() => setRefreshKey(state => state + 1)}
  47. />
  48. </SafeAreaProvider>
  49. </View>
  50. );
  51. }