Updated docs for next

This commit is contained in:
Website Deployment Script
2016-07-01 14:51:35 +00:00
parent 04ce366cbe
commit 3b05cf2c98
+1 -1
View File
@@ -42,7 +42,7 @@ All native modules share the same namespace. Watch out for name collisions when
RCTRootView <span class="token operator">*</span>rootView <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>RCTRootView alloc<span class="token punctuation">]</span> initWithBridge<span class="token punctuation">:</span>bridge
moduleName<span class="token punctuation">:</span>appName
initialProperties<span class="token punctuation">:</span>props<span class="token punctuation">]</span><span class="token punctuation">;</span>
rootView<span class="token punctuation">.</span>frame <span class="token operator">=</span> <span class="token function">CGMakeRect<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> self<span class="token punctuation">.</span>view<span class="token punctuation">.</span>width<span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
rootView<span class="token punctuation">.</span>frame <span class="token operator">=</span> <span class="token function">CGRectMake<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> self<span class="token punctuation">.</span>view<span class="token punctuation">.</span>width<span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">[</span>self<span class="token punctuation">.</span>view addSubview<span class="token punctuation">:</span>rootView<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><p>When we have a fixed size root view, we need to respect its bounds on the JS side. In other words, we need to ensure that the React Native content can be contained within the fixed-size root view. The easiest way to ensure this is to use flexbox layout. If you use absolute positioning, and React components are visible outside the root view&#x27;s bounds, you&#x27;ll get overlap with native views, causing some features to behave unexpectedly. For instance, &#x27;TouchableHighlight&#x27; will not highlight your touches outside the root view&#x27;s bounds.</p><p>It&#x27;s totally fine to update root view&#x27;s size dynamically by re-setting its frame property. React Native will take care of the content&#x27;s layout.</p><h4><a class="anchor" name="react-native-content-with-flexible-size"></a>React Native content with flexible size <a class="hash-link" href="docs/communication-ios.html#react-native-content-with-flexible-size">#</a></h4><p>In some cases we&#x27;d like to render content of initially unknown size. Let&#x27;s say the size will be defined dynamically in JS. We have two solutions to this problem.</p><ol><li>You can wrap your React Native view in <code>ScrollView</code> component. This guarantees that your content will always be available and it won&#x27;t overlap with native views.</li><li>React Native allows you to determine, in JS, the size of the RN app and provide it to the owner of the hosting <code>RCTRootView</code>. The owner is then responsible for re-laying out the subviews and keeping the UI consistent. We achieve this with <code>RCTRootView</code>&#x27;s flexibility modes.</li></ol><p><code>RCTRootView</code> supports 4 different size flexibility modes:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// RCTRootView.h
</span>