mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
update website
This commit is contained in:
@@ -4,7 +4,7 @@ recognize simple multi-touch gestures.</p><p>It provides a predictable wrapper o
|
||||
<a href="/react-native/docs/gesture-responder-system.html" target="">gesture responder system</a>.
|
||||
For each handler, it provides a new <code>gestureState</code> object alongside the
|
||||
native event object:</p><div class="prism language-javascript">onPanResponderMove<span class="token punctuation">:</span> <span class="token punctuation">(</span>event<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">}</span></div><p>A native event is a synthetic touch event with the following form:</p><ul><li><code>nativeEvent</code><ul><li><code>changedTouches</code> - Array of all touch events that have changed since the last event</li><li><code>identifier</code> - The ID of the touch</li><li><code>locationX</code> - The X position of the touch, relative to the element</li><li><code>locationY</code> - The Y position of the touch, relative to the element</li><li><code>pageX</code> - The X position of the touch, relative to the root element</li><li><code>pageY</code> - The Y position of the touch, relative to the root element</li><li><code>target</code> - The node id of the element receiving the touch event</li><li><code>timestamp</code> - A time identifier for the touch, useful for velocity calculation</li><li><code>touches</code> - Array of all current touches on the screen</li></ul></li></ul><p>A <code>gestureState</code> object has the following:</p><ul><li><code>stateID</code> - ID of the gestureState- persisted as long as there at least
|
||||
one touch on screen</li><li><code>moveX</code> - the latest screen coordinates of the recently-moved touch</li><li><code>moveY</code> - the latest screen coordinates of the recently-moved touch</li><li><code>x0</code> - the screen coordinates of the responder grant</li><li><code>y0</code> - the screen coordinates of the responder grant</li><li><code>dx</code> - accumulated distance of the gesture since the touch started</li><li><code>dy</code> - accumulated distance of the gesture since the touch started</li><li><code>vx</code> - current velocity of the gesture</li><li><code>vy</code> - current velocity of the gesture</li><li><code>numberActiveTouches</code> - Number of touches currently on screeen</li></ul><h3><a class="anchor" name="basic-usage"></a>Basic Usage <a class="hash-link" href="#basic-usage">#</a></h3><div class="prism language-javascript"> componentWillMount<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
one touch on screen</li><li><code>moveX</code> - the latest screen coordinates of the recently-moved touch</li><li><code>moveY</code> - the latest screen coordinates of the recently-moved touch</li><li><code>x0</code> - the screen coordinates of the responder grant</li><li><code>y0</code> - the screen coordinates of the responder grant</li><li><code>dx</code> - accumulated distance of the gesture since the touch started</li><li><code>dy</code> - accumulated distance of the gesture since the touch started</li><li><code>vx</code> - current velocity of the gesture</li><li><code>vy</code> - current velocity of the gesture</li><li><code>numberActiveTouches</code> - Number of touches currently on screen</li></ul><h3><a class="anchor" name="basic-usage"></a>Basic Usage <a class="hash-link" href="#basic-usage">#</a></h3><div class="prism language-javascript"> componentWillMount<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_panResponder <span class="token operator">=</span> PanResponder<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // Ask to be the responder:
|
||||
</span> onStartShouldSetPanResponder<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -13,7 +13,7 @@ that the app is loading or there is some activity in the app.</p><p>Example:</p>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js">Edit on GitHub</a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="color"></a>color <span class="propType">ColorPropType</span> <a class="hash-link" href="#color">#</a></h4><div><p>Color of the progress bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indeterminate"></a>indeterminate <span class="propType">indeterminateType</span> <a class="hash-link" href="#indeterminate">#</a></h4><div><p>If the progress bar will show indeterminate progress. Note that this
|
||||
can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progress"></a>progress <span class="propType">number</span> <a class="hash-link" href="#progress">#</a></h4><div><p>The progress value (between 0 and 1).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="styleattr"></a>styleAttr <span class="propType">STYLE_ATTRIBUTES</span> <a class="hash-link" href="#styleattr">#</a></h4><div><p>Style of the ProgressBar. One of:</p><ul><li>Horizontal</li><li>Small</li><li>Large</li><li>Inverse</li><li>SmallInverse</li><li>LargeInverse</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ProgressBarAndroidExample.android.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progress"></a>progress <span class="propType">number</span> <a class="hash-link" href="#progress">#</a></h4><div><p>The progress value (between 0 and 1).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="styleattr"></a>styleAttr <span class="propType">STYLE_ATTRIBUTES</span> <a class="hash-link" href="#styleattr">#</a></h4><div><p>Style of the ProgressBar. One of:</p><ul><li>Horizontal</li><li>Normal (default)</li><li>Small</li><li>Large</li><li>Inverse</li><li>SmallInverse</li><li>LargeInverse</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ProgressBarAndroidExample.android.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> ProgressBar <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'ProgressBarAndroid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'React'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -60,6 +60,10 @@ can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><
|
||||
<ProgressBar <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Normal ProgressBar"</span><span class="token operator">></span>
|
||||
<ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"Normal"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Small ProgressBar"</span><span class="token operator">></span>
|
||||
<ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"Small"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
|
||||
@@ -15,7 +15,7 @@ and your server-side system. To get an idea, <a href="https://parse.com/tutorial
|
||||
</span> <span class="token operator">-</span> <span class="token punctuation">(</span>void<span class="token punctuation">)</span>application<span class="token punctuation">:</span><span class="token punctuation">(</span>UIApplication <span class="token operator">*</span><span class="token punctuation">)</span>application didReceiveRemoteNotification<span class="token punctuation">:</span><span class="token punctuation">(</span>NSDictionary <span class="token operator">*</span><span class="token punctuation">)</span>notification
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token punctuation">[</span>RCTPushNotificationManager didReceiveRemoteNotification<span class="token punctuation">:</span>notification<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="presentlocalnotification"></a><span class="propType">static </span>presentLocalNotification<span class="propType">(details: Object)</span> <a class="hash-link" href="#presentlocalnotification">#</a></h4><div><p>Schedules the localNotification for immediate presentation.</p><p>details is an object containing:</p><ul><li><code>alertBody</code> : The message displayed in the notification alert.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="schedulelocalnotification"></a><span class="propType">static </span>scheduleLocalNotification<span class="propType">(details: Object)</span> <a class="hash-link" href="#schedulelocalnotification">#</a></h4><div><p>Schedules the localNotification for future presentation.</p><p>details is an object containing:</p><ul><li><code>fireDate</code> : The date and time when the system should deliver the notification.</li><li><code>alertBody</code> : The message displayed in the notification alert.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="cancelalllocalnotifications"></a><span class="propType">static </span>cancelAllLocalNotifications<span class="propType">()</span> <a class="hash-link" href="#cancelalllocalnotifications">#</a></h4><div><p>Cancels all scheduled localNotifications</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setapplicationiconbadgenumber"></a><span class="propType">static </span>setApplicationIconBadgeNumber<span class="propType">(number: number)</span> <a class="hash-link" href="#setapplicationiconbadgenumber">#</a></h4><div><p>Sets the badge number for the app icon on the home screen</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getapplicationiconbadgenumber"></a><span class="propType">static </span>getApplicationIconBadgeNumber<span class="propType">(callback: Function)</span> <a class="hash-link" href="#getapplicationiconbadgenumber">#</a></h4><div><p>Gets the current badge number for the app icon on the home screen</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addeventlistener"></a><span class="propType">static </span>addEventListener<span class="propType">(type: string, handler: Function)</span> <a class="hash-link" href="#addeventlistener">#</a></h4><div><p>Attaches a listener to remote notification events while the app is running
|
||||
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="presentlocalnotification"></a><span class="propType">static </span>presentLocalNotification<span class="propType">(details: Object)</span> <a class="hash-link" href="#presentlocalnotification">#</a></h4><div><p>Schedules the localNotification for immediate presentation.</p><p>details is an object containing:</p><ul><li><code>alertBody</code> : The message displayed in the notification alert.</li><li><code>soundName</code> : The sound played when the notification is fired (optional).</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="schedulelocalnotification"></a><span class="propType">static </span>scheduleLocalNotification<span class="propType">(details: Object)</span> <a class="hash-link" href="#schedulelocalnotification">#</a></h4><div><p>Schedules the localNotification for future presentation.</p><p>details is an object containing:</p><ul><li><code>fireDate</code> : The date and time when the system should deliver the notification.</li><li><code>alertBody</code> : The message displayed in the notification alert.</li><li><code>soundName</code> : The sound played when the notification is fired (optional).</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="cancelalllocalnotifications"></a><span class="propType">static </span>cancelAllLocalNotifications<span class="propType">()</span> <a class="hash-link" href="#cancelalllocalnotifications">#</a></h4><div><p>Cancels all scheduled localNotifications</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setapplicationiconbadgenumber"></a><span class="propType">static </span>setApplicationIconBadgeNumber<span class="propType">(number: number)</span> <a class="hash-link" href="#setapplicationiconbadgenumber">#</a></h4><div><p>Sets the badge number for the app icon on the home screen</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getapplicationiconbadgenumber"></a><span class="propType">static </span>getApplicationIconBadgeNumber<span class="propType">(callback: Function)</span> <a class="hash-link" href="#getapplicationiconbadgenumber">#</a></h4><div><p>Gets the current badge number for the app icon on the home screen</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addeventlistener"></a><span class="propType">static </span>addEventListener<span class="propType">(type: string, handler: Function)</span> <a class="hash-link" href="#addeventlistener">#</a></h4><div><p>Attaches a listener to remote notification events while the app is running
|
||||
in the foreground or the background.</p><p>Valid events are:</p><ul><li><code>notification</code> : Fired when a remote notification is received. The
|
||||
handler will be invoked with an instance of <code>PushNotificationIOS</code>.</li><li><code>register</code>: Fired when the user registers for remote notifications. The
|
||||
handler will be invoked with a hex string representing the deviceToken.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="requestpermissions"></a><span class="propType">static </span>requestPermissions<span class="propType">(permissions?: {
|
||||
|
||||
+1
-1
@@ -17,7 +17,7 @@ to events and updating the value prop to keep the controlled state in sync.</p><
|
||||
- email-address</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxlength"></a>maxLength <span class="propType">number</span> <a class="hash-link" href="#maxlength">#</a></h4><div><p>Limits the maximum number of characters that can be entered. Use this
|
||||
instead of implementing the logic in JS to avoid flicker.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="multiline"></a>multiline <span class="propType">bool</span> <a class="hash-link" href="#multiline">#</a></h4><div><p>If true, the text input can be multiple lines.
|
||||
The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onblur"></a>onBlur <span class="propType">function</span> <a class="hash-link" href="#onblur">#</a></h4><div><p>Callback that is called when the text input is blurred</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange <span class="propType">function</span> <a class="hash-link" href="#onchange">#</a></h4><div><p>Callback that is called when the text input's text changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangetext"></a>onChangeText <span class="propType">function</span> <a class="hash-link" href="#onchangetext">#</a></h4><div><p>Callback that is called when the text input's text changes.
|
||||
Changed text is passed as an argument to the callback handler.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendediting"></a>onEndEditing <span class="propType">function</span> <a class="hash-link" href="#onendediting">#</a></h4><div><p>Callback that is called when text input ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onfocus"></a>onFocus <span class="propType">function</span> <a class="hash-link" href="#onfocus">#</a></h4><div><p>Callback that is called when the text input is focused</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with <code>{x, y, width, height}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onsubmitediting"></a>onSubmitEditing <span class="propType">function</span> <a class="hash-link" href="#onsubmitediting">#</a></h4><div><p>Callback that is called when the text input's submit button is pressed.
|
||||
Changed text is passed as an argument to the callback handler.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendediting"></a>onEndEditing <span class="propType">function</span> <a class="hash-link" href="#onendediting">#</a></h4><div><p>Callback that is called when text input ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onfocus"></a>onFocus <span class="propType">function</span> <a class="hash-link" href="#onfocus">#</a></h4><div><p>Callback that is called when the text input is focused</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with <code>{x, y, width, height}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onselectionchange"></a>onSelectionChange <span class="propType">function</span> <a class="hash-link" href="#onselectionchange">#</a></h4><div><p>Callback that is called when the text input selection is changed</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onsubmitediting"></a>onSubmitEditing <span class="propType">function</span> <a class="hash-link" href="#onsubmitediting">#</a></h4><div><p>Callback that is called when the text input's submit button is pressed.
|
||||
Invalid if multiline={true} is specified.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholder"></a>placeholder <span class="propType">string</span> <a class="hash-link" href="#placeholder">#</a></h4><div><p>The string that will be rendered before text input has been entered</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholdertextcolor"></a>placeholderTextColor <span class="propType">string</span> <a class="hash-link" href="#placeholdertextcolor">#</a></h4><div><p>The text color of the placeholder string</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="securetextentry"></a>secureTextEntry <span class="propType">bool</span> <a class="hash-link" href="#securetextentry">#</a></h4><div><p>If true, the text input obscures the text entered so that sensitive text
|
||||
like passwords stay secure. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="text.html#style">Text#style</a></span> <a class="hash-link" href="#style">#</a></h4><div><p>Styles</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value <span class="propType">string</span> <a class="hash-link" href="#value">#</a></h4><div><p>The value to show for the text input. TextInput is a controlled
|
||||
component, which means the native value will be forced to match this
|
||||
|
||||
Reference in New Issue
Block a user