mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
8 lines
3.1 KiB
Markdown
8 lines
3.1 KiB
Markdown
---
|
|
id: version-0.48-keyboardavoidingview
|
|
title: keyboardavoidingview
|
|
original_id: keyboardavoidingview
|
|
---
|
|
<a id="content"></a><h1><a class="anchor" name="keyboardavoidingview"></a>KeyboardAvoidingView <a class="hash-link" href="docs/keyboardavoidingview.html#keyboardavoidingview">#</a></h1><div><div><p>It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard.
|
|
It can automatically adjust either its position or bottom padding based on the position of the keyboard.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/keyboardavoidingview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/keyboardavoidingview.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="behavior"></a>behavior?: <span class="propType">enum('height', 'position', 'padding')</span> <a class="hash-link" href="docs/keyboardavoidingview.html#behavior">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentcontainerstyle"></a>contentContainerStyle?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/keyboardavoidingview.html#contentcontainerstyle">#</a></h4><div><p>The style of the content container(View) when behavior is 'position'.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardverticaloffset"></a>keyboardVerticalOffset: <span class="propType">number</span> <a class="hash-link" href="docs/keyboardavoidingview.html#keyboardverticaloffset">#</a></h4><div><p>This is the distance between the top of the user screen and the react native view,
|
|
may be non-zero in some use cases.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/keyboardavoidingview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="relativekeyboardheight"></a>relativeKeyboardHeight<span class="methodType">(keyboardFrame: object): </span> <a class="hash-link" href="docs/keyboardavoidingview.html#relativekeyboardheight">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="onkeyboardchange"></a>onKeyboardChange<span class="methodType">(event: object)</span> <a class="hash-link" href="docs/keyboardavoidingview.html#onkeyboardchange">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="onlayout"></a>onLayout<span class="methodType">(event: ViewLayoutEvent)</span> <a class="hash-link" href="docs/keyboardavoidingview.html#onlayout">#</a></h4></div></div></span></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Keyboard/KeyboardAvoidingView.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/image.html#content">← Prev</a><a class="docs-next" href="docs/listview.html#content">Next →</a></div> |