浏览代码

Update README.md

Janic Duplessis 4 年前
父节点
当前提交
908744fa14
没有帐户链接到提交者的电子邮件
共有 1 个文件被更改,包括 9 次插入9 次删除
  1. 9
    9
      README.md

+ 9
- 9
README.md 查看文件

96
 Usage with hooks api:
96
 Usage with hooks api:
97
 
97
 
98
 ```js
98
 ```js
99
-import { useSafeArea } from 'react-native-safe-area-context';
99
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
100
 
100
 
101
 function HookComponent() {
101
 function HookComponent() {
102
-  const insets = useSafeArea();
102
+  const insets = useSafeAreaInsets();
103
 
103
 
104
   return <View style={{ paddingTop: insets.top }} />;
104
   return <View style={{ paddingTop: insets.top }} />;
105
 }
105
 }
108
 Usage with consumer api:
108
 Usage with consumer api:
109
 
109
 
110
 ```js
110
 ```js
111
-import { SafeAreaConsumer } from 'react-native-safe-area-context';
111
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
112
 
112
 
113
 class ClassComponent extends React.Component {
113
 class ClassComponent extends React.Component {
114
   render() {
114
   render() {
115
     return (
115
     return (
116
-      <SafeAreaConsumer>
116
+      <SafeAreaInsetsContext.Consumer>
117
         {insets => <View style={{ paddingTop: insets.top }} />}
117
         {insets => <View style={{ paddingTop: insets.top }} />}
118
-      </SafeAreaConsumer>
118
+      </SafeAreaInsetsContext.Consumer>
119
     );
119
     );
120
   }
120
   }
121
 }
121
 }
137
 
137
 
138
 ### Web SSR
138
 ### Web SSR
139
 
139
 
140
-If you are doing server side rendering on the web you can use `initialSafeAreaInsets` to inject insets value based on the device the user has, or simply pass zero values. Since insets measurement is async it will break rendering your page content otherwise.
140
+If you are doing server side rendering on the web you can use `initialMetrics` to inject insets and frame value based on the device the user has, or simply pass zero values. Since insets measurement is async it will break rendering your page content otherwise.
141
 
141
 
142
 ### Optimization
142
 ### Optimization
143
 
143
 
144
-To speed up the initial render, you can import `initialWindowSafeAreaInsets` from this package and set as the `initialSafeAreaInsets` prop on the provider as described in Web SSR. You cannot do this if your provider remounts, or you are using `react-native-navigation`.
144
+To speed up the initial render, you can import `initialWindowMetrics` from this package and set as the `initialMetrics` prop on the provider as described in Web SSR. You cannot do this if your provider remounts, or you are using `react-native-navigation`.
145
 
145
 
146
 ```js
146
 ```js
147
 import {
147
 import {
148
   SafeAreaProvider,
148
   SafeAreaProvider,
149
-  initialWindowSafeAreaInsets
149
+  initialWindowMetrics
150
 } from 'react-native-safe-area-context';
150
 } from 'react-native-safe-area-context';
151
 
151
 
152
 function App() {
152
 function App() {
153
   return (
153
   return (
154
-    <SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>
154
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
155
       ...
155
       ...
156
     </SafeAreaProvider>
156
     </SafeAreaProvider>
157
   );
157
   );