mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
@@ -5,6 +5,13 @@
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/keyboardavoidingview.md" target="_blank">Edit</a><h1>KeyboardAvoidingView</h1></header><article><div><span><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>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">import</span> { KeyboardAvoidingView } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">KeyboardAvoidingView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span> <span class="hljs-attr">behavior</span>=<span class="hljs-string">"padding"</span> <span class="hljs-attr">enabled</span>></span>
|
||||
... your UI ...
|
||||
<span class="hljs-tag"></<span class="hljs-name">KeyboardAvoidingView</span>></span></span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h3>
|
||||
<p><img src="/react-native/docs/assets/KeyboardAvoidingView/example.gif" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
|
||||
@@ -15,6 +22,7 @@
|
||||
<li><a href="/react-native/docs/0.54/keyboardavoidingview.html#keyboardverticaloffset"><code>keyboardVerticalOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.54/keyboardavoidingview.html#behavior"><code>behavior</code></a></li>
|
||||
<li><a href="/react-native/docs/0.54/keyboardavoidingview.html#contentcontainerstyle"><code>contentContainerStyle</code></a></li>
|
||||
<li><a href="/react-native/docs/0.54/keyboardavoidingview.html#enabled"><code>enabled</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
@@ -57,6 +65,17 @@
|
||||
<tr><td>View.style</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="enabled"></a><a href="#enabled" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>enabled</code></h3>
|
||||
<p>Enabled or disabled KeyboardAvoidingView.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>boolean</td><td>Yes</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="relativekeyboardheight"></a><a href="#relativekeyboardheight" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>relativeKeyboardHeight()</code></h3>
|
||||
<pre><code class="hljs css javascript">relativeKeyboardHeight(keyboardFrame: object):
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">import</span> { KeyboardAvoidingView } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">KeyboardAvoidingView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span> <span class="hljs-attr">behavior</span>=<span class="hljs-string">"padding"</span>></span>
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">KeyboardAvoidingView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span> <span class="hljs-attr">behavior</span>=<span class="hljs-string">"padding"</span> <span class="hljs-attr">enabled</span>></span>
|
||||
... your UI ...
|
||||
<span class="hljs-tag"></<span class="hljs-name">KeyboardAvoidingView</span>></span></span>
|
||||
</code></pre>
|
||||
@@ -22,6 +22,7 @@
|
||||
<li><a href="/react-native/docs/keyboardavoidingview.html#keyboardverticaloffset"><code>keyboardVerticalOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/keyboardavoidingview.html#behavior"><code>behavior</code></a></li>
|
||||
<li><a href="/react-native/docs/keyboardavoidingview.html#contentcontainerstyle"><code>contentContainerStyle</code></a></li>
|
||||
<li><a href="/react-native/docs/keyboardavoidingview.html#enabled"><code>enabled</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
@@ -64,6 +65,17 @@
|
||||
<tr><td>View.style</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="enabled"></a><a href="#enabled" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>enabled</code></h3>
|
||||
<p>Enabled or disabled KeyboardAvoidingView.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>boolean</td><td>Yes</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="relativekeyboardheight"></a><a href="#relativekeyboardheight" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>relativeKeyboardHeight()</code></h3>
|
||||
<pre><code class="hljs css javascript">relativeKeyboardHeight(keyboardFrame: object):
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">import</span> { KeyboardAvoidingView } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">KeyboardAvoidingView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span> <span class="hljs-attr">behavior</span>=<span class="hljs-string">"padding"</span>></span>
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">KeyboardAvoidingView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span> <span class="hljs-attr">behavior</span>=<span class="hljs-string">"padding"</span> <span class="hljs-attr">enabled</span>></span>
|
||||
... your UI ...
|
||||
<span class="hljs-tag"></<span class="hljs-name">KeyboardAvoidingView</span>></span></span>
|
||||
</code></pre>
|
||||
@@ -22,6 +22,7 @@
|
||||
<li><a href="/react-native/docs/next/keyboardavoidingview.html#keyboardverticaloffset"><code>keyboardVerticalOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/next/keyboardavoidingview.html#behavior"><code>behavior</code></a></li>
|
||||
<li><a href="/react-native/docs/next/keyboardavoidingview.html#contentcontainerstyle"><code>contentContainerStyle</code></a></li>
|
||||
<li><a href="/react-native/docs/next/keyboardavoidingview.html#enabled"><code>enabled</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
@@ -64,6 +65,17 @@
|
||||
<tr><td>View.style</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="enabled"></a><a href="#enabled" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>enabled</code></h3>
|
||||
<p>Enabled or disabled KeyboardAvoidingView.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>boolean</td><td>Yes</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="relativekeyboardheight"></a><a href="#relativekeyboardheight" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>relativeKeyboardHeight()</code></h3>
|
||||
<pre><code class="hljs css javascript">relativeKeyboardHeight(keyboardFrame: object):
|
||||
|
||||
Reference in New Issue
Block a user