Skip to content

Commit 9b33a2e

Browse files
sunnylqmsunnylqm
committed
fix build
1 parent 340fec2 commit 9b33a2e

File tree

10 files changed

+964
-341
lines changed

10 files changed

+964
-341
lines changed

‎cndocs/boxshadowvalue.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
id: boxshadowvalue
3+
title: BoxShadowValue Object Type
4+
---
5+
6+
The `BoxShadowValue` object is taken by the [`boxShadow`](./view-style-props.md#boxshadow) style prop. It is comprised of 2-4 lengths, an optional color, and an optional `inset` boolean. These values collectively define the box shadow's color, position, size, and blurriness.
7+
8+
## Example
9+
10+
```js
11+
{
12+
offsetX: 10,
13+
offsetY: -3,
14+
blurRadius: '15px',
15+
spreadDistance: '10px',
16+
color: 'red',
17+
inset: true,
18+
}
19+
```
20+
21+
## Keys and values
22+
23+
### `offsetX`
24+
25+
The offset on the x-axis. This can be positive or negative. A positive value indicates right and negative indicates left.
26+
27+
| Type | Optional |
28+
| ---------------- | -------- |
29+
| number \| string | No |
30+
31+
### `offsetY`
32+
33+
The offset on the y-axis. This can be positive or negative. A positive value indicates up and negative indicates down.
34+
35+
| Type | Optional |
36+
| ---------------- | -------- |
37+
| number \| string | No |
38+
39+
### `blurRadius`
40+
41+
Represents the radius used in the [Guassian blur](https://en.wikipedia.org/wiki/Gaussian_blur) algorithm. The larger the value the blurrier the shadow is. Only non-negative values are valid. The default is 0.
42+
43+
| Type | Optional |
44+
| --------------- | -------- |
45+
| numer \| string | Yes |
46+
47+
### `spreadDistance`
48+
49+
How much larger or smaller the shadow grows or shrinks. A positive value will grow the shadow, a negative value will shrink the shadow.
50+
51+
| Type | Optional |
52+
| --------------- | -------- |
53+
| numer \| string | Yes |
54+
55+
### `color`
56+
57+
The color of the shadow. The default is `black`.
58+
59+
| Type | Optional |
60+
| -------------------- | -------- |
61+
| [color](./colors.md) | Yes |
62+
63+
### `inset`
64+
65+
Whether the shadow is inset or not. Inset shadows will appear around the inside of the element's border box as opposed to the outside.
66+
67+
| Type | Optional |
68+
| ------- | -------- |
69+
| boolean | Yes |
70+
71+
## Used by
72+
73+
- [`boxShadow`](./view-style-props.md#boxshadow)

‎cndocs/dropshadowvalue.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
id: dropshadowvalue
3+
title: DropShadowValue Object Type
4+
---
5+
6+
The `DropShadowValue` object is taken by the [`filter`](./view-style-props.md#filter) style prop for the `dropShadow` function. It is comprised of 2 or 3 lengths and an optional color. These values collectively define the drop shadow's color, position, and blurriness.
7+
8+
## Example
9+
10+
```js
11+
{
12+
offsetX: 10,
13+
offsetY: -3,
14+
standardDeviation: '15px',
15+
color: 'blue',
16+
}
17+
```
18+
19+
## Keys and values
20+
21+
### `offsetX`
22+
23+
The offset on the x-axis. This can be positive or negative. A positive value indicates right and negative indicates left.
24+
25+
| Type | Optional |
26+
| ---------------- | -------- |
27+
| number \| string | No |
28+
29+
### `offsetY`
30+
31+
The offset on the y-axis. This can be positive or negative. A positive value indicates up and negative indicates down.
32+
33+
| Type | Optional |
34+
| ---------------- | -------- |
35+
| number \| string | No |
36+
37+
### `standardDeviation`
38+
39+
Represents the standard deviation used in the [Guassian blur](https://en.wikipedia.org/wiki/Gaussian_blur) algorithm. The larger the value the blurrier the shadow is. Only non-negative values are valid. The default is 0.
40+
41+
| Type | Optional |
42+
| --------------- | -------- |
43+
| numer \| string | Yes |
44+
45+
### `color`
46+
47+
The color of the shadow. The default is `black`.
48+
49+
| Type | Optional |
50+
| -------------------- | -------- |
51+
| [color](./colors.md) | Yes |
52+
53+
## Used by
54+
55+
- [`filter`](./view-style-props.md#filter)

‎cndocs/the-new-architecture/direct-manipulation.md‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
id: direct-manipulation-new-architecture
3+
title: Direct Manipulation
4+
---
5+
6+
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
7+
8+
It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.
9+
10+
:::caution
11+
Use `setNativeProps` when frequent re-rendering creates a performance bottleneck!
12+
13+
Direct manipulation will not be a tool that you reach for frequently. You will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views.
14+
`setNativeProps` is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about.
15+
16+
Before you use it, try to solve your problem with `setState` and [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action).
17+
:::
18+
19+
## setNativeProps to edit TextInput value
20+
21+
Another very common use case of `setNativeProps` is to edit the value of the TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary.
22+
23+
For example, the following code demonstrates editing the input when you tap a button:
24+
25+
<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
26+
<TabItem value="javascript">
27+
28+
```SnackPlayer name=setNativeProps%20on%20TextInput&ext=js
29+
import React from 'react';
30+
import {useCallback, useRef} from 'react';
31+
import {
32+
StyleSheet,
33+
TextInput,
34+
Text,
35+
TouchableOpacity,
36+
View,
37+
} from 'react-native';
38+
39+
const App = () => {
40+
const inputRef = useRef(null);
41+
const editText = useCallback(() => {
42+
inputRef.current.setNativeProps({text: 'Edited Text'});
43+
}, []);
44+
45+
return (
46+
<View style={styles.container}>
47+
<TextInput ref={inputRef} style={styles.input} />
48+
<TouchableOpacity onPress={editText}>
49+
<Text>Edit text</Text>
50+
</TouchableOpacity>
51+
</View>
52+
);
53+
};
54+
55+
const styles = StyleSheet.create({
56+
container: {
57+
flex: 1,
58+
alignItems: 'center',
59+
justifyContent: 'center',
60+
},
61+
input: {
62+
height: 50,
63+
width: 200,
64+
marginHorizontal: 20,
65+
borderWidth: 1,
66+
borderColor: '#ccc',
67+
},
68+
});
69+
70+
export default App;
71+
```
72+
73+
</TabItem>
74+
<TabItem value="typescript">
75+
76+
```SnackPlayer name=Clear%20text&ext=tsx
77+
import React from 'react';
78+
import {useCallback, useRef} from 'react';
79+
import {
80+
StyleSheet,
81+
TextInput,
82+
Text,
83+
TouchableOpacity,
84+
View,
85+
} from 'react-native';
86+
87+
const App = () => {
88+
const inputRef = useRef<TextInput>(null);
89+
const editText = useCallback(() => {
90+
inputRef.current?.setNativeProps({text: 'Edited Text'});
91+
}, []);
92+
93+
return (
94+
<View style={styles.container}>
95+
<TextInput ref={inputRef} style={styles.input} />
96+
<TouchableOpacity onPress={editText}>
97+
<Text>Edit text</Text>
98+
</TouchableOpacity>
99+
</View>
100+
);
101+
};
102+
103+
const styles = StyleSheet.create({
104+
container: {
105+
flex: 1,
106+
alignItems: 'center',
107+
justifyContent: 'center',
108+
},
109+
input: {
110+
height: 50,
111+
width: 200,
112+
marginHorizontal: 20,
113+
borderWidth: 1,
114+
borderColor: '#ccc',
115+
},
116+
});
117+
118+
export default App;
119+
```
120+
121+
</TabItem>
122+
</Tabs>
123+
124+
You can use the [`clear`](../textinput#clear) method to clear the `TextInput` which clears the current input text using the same approach.
125+
126+
## Avoiding conflicts with the render function
127+
128+
If you update a property that is also managed by the render function, you might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from `setNativeProps` will be completely ignored and overridden.

‎cndocs/the-new-architecture/layout-measurements.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Measuring the Layout
2+
3+
Sometimes, you need to measure the current layout to apply some changes to the overall layout or to make decisions and call some specific logic.
4+
5+
React Native provides some native methods to know what are the measurements of the views.
6+
7+
The best way to invoke those methods is in a `useLayoutEffect` hook: this will give you the most recent values for those measurements and it will let you apply changes in the same frame when the measurements are computed.
8+
9+
Typical code will look like this:
10+
11+
```tsx
12+
function AComponent(children) {
13+
const targetRef = React.useRef(null)
14+
15+
useLayoutEffect(() => {
16+
targetRef.current?.measure((x, y, width, height, pageX, pageY) => {
17+
//do something with the measurements
18+
});
19+
}, [ /* add dependencies here */]);
20+
21+
return (
22+
<View ref={targetRef}>
23+
{children}
24+
<View />
25+
);
26+
}
27+
```
28+
29+
:::note
30+
The methods described here are available on most of the default components provided by React Native. However, they are _not_ available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
31+
:::
32+
33+
## measure(callback)
34+
35+
Determines the location on screen (`x` and `y`), `width`, and `height` in the viewport of the given view. Returns the values via an async callback. If successful, the callback will be called with the following arguments:
36+
37+
- `x`: the `x` coordinate of the origin (top-left corner) of the measured view in the viewport.
38+
- `y`: the `y` coordinate of the origin (top-left corner) of the measured view in the viewport.
39+
- `width`: the `width` of the view.
40+
- `height`: the `height` of the view.
41+
- `pageX`: the `x` coordinate of the view in the viewport (typically the whole screen).
42+
- `pageY`: the `y` coordinate of the view in the viewport (typically the whole screen).
43+
44+
Also the `width` and `height` returned by `measure()` are the `width` and `height` of the component in the viewport.
45+
46+
## measureInWindow(callback)
47+
48+
Determines the location (`x` and `y`) of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
49+
50+
- `x`: the `x` coordinate of the view in the current window.
51+
- `y`: the `y` coordinate of the view in the current window.
52+
- `width`: the `width` of the view.
53+
- `height`: the `height` of the view.

0 commit comments

Comments
 (0)