mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on e9a7b64316032e568ed6a134d563a06b455eed89
This commit is contained in:
Website Deployment Script
@@ -85,7 +85,7 @@ ignite new MyTSProject
|
||||
<ol>
|
||||
<li>Add TypeScript and the types for React Native and Jest to your project.</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-sh">yarn add typescript @types/jest @types/react @types/react-native @types/react-test-renderer
|
||||
<pre><code class="hljs css language-sh">yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
|
||||
<span class="hljs-comment"># or for npm</span>
|
||||
npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
|
||||
</code></pre>
|
||||
@@ -204,7 +204,7 @@ const styles = StyleSheet.<span class="hljs-keyword">create</span>({
|
||||
<ul>
|
||||
<li><a href="http://www.typescriptlang.org/docs/home.html">TypeScript Handbook</a></li>
|
||||
<li><a href="https://reactjs.org/docs/static-type-checking.html#typescript">React's documentation on TypeScript</a></li>
|
||||
<li>[React + TypeScript Cheatsheets][cheat] has a good overview on how to use React with TypeScript</li>
|
||||
<li><a href="https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#reacttypescript-cheatsheets">React + TypeScript Cheatsheets</a> has a good overview on how to use React with TypeScript</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="using-custom-path-aliases-with-typescript"></a><a href="#using-custom-path-aliases-with-typescript" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>Using Custom Path Aliases with TypeScript</h2>
|
||||
<p>To use custom path aliases with TypeScript, you need to set the path aliases to work from both Babel and TypeScript. Here's how:</p>
|
||||
|
||||
@@ -85,7 +85,7 @@ ignite new MyTSProject
|
||||
<ol>
|
||||
<li>Add TypeScript and the types for React Native and Jest to your project.</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-sh">yarn add typescript @types/jest @types/react @types/react-native @types/react-test-renderer
|
||||
<pre><code class="hljs css language-sh">yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
|
||||
<span class="hljs-comment"># or for npm</span>
|
||||
npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
|
||||
</code></pre>
|
||||
@@ -204,7 +204,7 @@ const styles = StyleSheet.<span class="hljs-keyword">create</span>({
|
||||
<ul>
|
||||
<li><a href="http://www.typescriptlang.org/docs/home.html">TypeScript Handbook</a></li>
|
||||
<li><a href="https://reactjs.org/docs/static-type-checking.html#typescript">React's documentation on TypeScript</a></li>
|
||||
<li>[React + TypeScript Cheatsheets][cheat] has a good overview on how to use React with TypeScript</li>
|
||||
<li><a href="https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#reacttypescript-cheatsheets">React + TypeScript Cheatsheets</a> has a good overview on how to use React with TypeScript</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="using-custom-path-aliases-with-typescript"></a><a href="#using-custom-path-aliases-with-typescript" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>Using Custom Path Aliases with TypeScript</h2>
|
||||
<p>To use custom path aliases with TypeScript, you need to set the path aliases to work from both Babel and TypeScript. Here's how:</p>
|
||||
|
||||
@@ -86,18 +86,18 @@
|
||||
<p>JavaScript thread performance suffers greatly when running in dev mode. This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in <a href="/docs/next/running-on-device#building-your-app-for-production">release builds</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-consolelog-statements"></a><a href="#using-consolelog-statements" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>Using <code>console.log</code> statements</h3>
|
||||
<p>When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread. This includes calls from debugging libraries such as <a href="https://github.com/evgenyrodionov/redux-logger">redux-logger</a>, so make sure to remove them before bundling. You can also use this <a href="https://babeljs.io/docs/plugins/transform-remove-console/">babel plugin</a> that removes all the <code>console.*</code> calls. You need to install it first with <code>npm i babel-plugin-transform-remove-console --save-dev</code>, and then edit the <code>.babelrc</code> file under your project directory like this:</p>
|
||||
<pre><code class="hljs css language-jsxon">{
|
||||
<span class="hljs-attr">"env"</span>: {
|
||||
<span class="hljs-attr">"production"</span>: {
|
||||
<span class="hljs-attr">"plugins"</span>: [<span class="hljs-string">"transform-remove-console"</span>]
|
||||
}
|
||||
}
|
||||
}
|
||||
<pre><code class="hljs css language-json"><span class="token punctuation">{</span>
|
||||
<span class="token property">"env"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"production"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"plugins"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"transform-remove-console"</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>This will automatically remove all <code>console.*</code> calls in the release (production) versions of your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists"></a><a href="#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>ListView</code> initial rendering is too slow or scroll performance is bad for large lists</h3>
|
||||
<p>Use the new <a href="/docs/next/flatlist"><code>FlatList</code></a> or <a href="/docs/next/sectionlist"><code>SectionList</code></a> component instead. Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows.</p>
|
||||
<p>If your <a href="/docs/next/flatlist"><code>FlatList</code></a> is rendering slow, be sure that you've implemented <a href="flatlist.html#getitemlayout"><code>getItemLayout</code></a> to optimize rendering speed by skipping measurement of the rendered items.</p>
|
||||
<p>If your <a href="/docs/next/flatlist"><code>FlatList</code></a> is rendering slow, be sure that you've implemented <a href="/docs/next/flatlist#getitemlayout"><code>getItemLayout</code></a> to optimize rendering speed by skipping measurement of the rendered items.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="js-fps-plunges-when-re-rendering-a-view-that-hardly-changes"></a><a href="#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>JS FPS plunges when re-rendering a view that hardly changes</h3>
|
||||
<p>If you are using a ListView, you must provide a <code>rowHasChanged</code> function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would only need to be a reference equality check.</p>
|
||||
<p>Similarly, you can implement <code>shouldComponentUpdate</code> and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureComponent to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.</p>
|
||||
|
||||
@@ -86,18 +86,18 @@
|
||||
<p>JavaScript thread performance suffers greatly when running in dev mode. This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in <a href="/docs/next/running-on-device#building-your-app-for-production">release builds</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-consolelog-statements"></a><a href="#using-consolelog-statements" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>Using <code>console.log</code> statements</h3>
|
||||
<p>When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread. This includes calls from debugging libraries such as <a href="https://github.com/evgenyrodionov/redux-logger">redux-logger</a>, so make sure to remove them before bundling. You can also use this <a href="https://babeljs.io/docs/plugins/transform-remove-console/">babel plugin</a> that removes all the <code>console.*</code> calls. You need to install it first with <code>npm i babel-plugin-transform-remove-console --save-dev</code>, and then edit the <code>.babelrc</code> file under your project directory like this:</p>
|
||||
<pre><code class="hljs css language-jsxon">{
|
||||
<span class="hljs-attr">"env"</span>: {
|
||||
<span class="hljs-attr">"production"</span>: {
|
||||
<span class="hljs-attr">"plugins"</span>: [<span class="hljs-string">"transform-remove-console"</span>]
|
||||
}
|
||||
}
|
||||
}
|
||||
<pre><code class="hljs css language-json"><span class="token punctuation">{</span>
|
||||
<span class="token property">"env"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"production"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"plugins"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"transform-remove-console"</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>This will automatically remove all <code>console.*</code> calls in the release (production) versions of your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists"></a><a href="#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>ListView</code> initial rendering is too slow or scroll performance is bad for large lists</h3>
|
||||
<p>Use the new <a href="/docs/next/flatlist"><code>FlatList</code></a> or <a href="/docs/next/sectionlist"><code>SectionList</code></a> component instead. Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows.</p>
|
||||
<p>If your <a href="/docs/next/flatlist"><code>FlatList</code></a> is rendering slow, be sure that you've implemented <a href="flatlist.html#getitemlayout"><code>getItemLayout</code></a> to optimize rendering speed by skipping measurement of the rendered items.</p>
|
||||
<p>If your <a href="/docs/next/flatlist"><code>FlatList</code></a> is rendering slow, be sure that you've implemented <a href="/docs/next/flatlist#getitemlayout"><code>getItemLayout</code></a> to optimize rendering speed by skipping measurement of the rendered items.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="js-fps-plunges-when-re-rendering-a-view-that-hardly-changes"></a><a href="#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" 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>JS FPS plunges when re-rendering a view that hardly changes</h3>
|
||||
<p>If you are using a ListView, you must provide a <code>rowHasChanged</code> function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would only need to be a reference equality check.</p>
|
||||
<p>Similarly, you can implement <code>shouldComponentUpdate</code> and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureComponent to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.</p>
|
||||
|
||||
@@ -1 +1 @@
|
||||
<svg width="498" height="452" viewBox="0 0 498 452" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect stroke="#979797" stroke-width="3" x="48.5" y="123.5" width="183" height="141" rx="10"/><path d="M207.75 67.246l-.5.865-14 24.25" stroke="#999" stroke-width="6"/><path d="M186.673 101.593c.05 1.106.884 1.59 1.87 1.08l10.448-5.416c1.961-1.017 2.005-2.733.094-3.836l-9.67-5.584c-1.91-1.102-3.376-.212-3.276 2l.534 11.756z" fill="#999"/><path d="M117.428 278.254l-.499.864-14 24.25" stroke="#999" stroke-width="6"/><path d="M96.351 312.6c.05 1.106.884 1.591 1.87 1.08l10.448-5.416c1.961-1.017 2.006-2.733.095-3.836l-9.672-5.584c-1.908-1.102-3.375-.212-3.274 2l.533 11.756z" fill="#999"/><path d="M255.25 67.246l.5.865 14 24.25" stroke="#999" stroke-width="6"/><path d="M276.327 101.593c-.05 1.106-.884 1.59-1.87 1.08l-10.448-5.416c-1.961-1.017-2.005-2.733-.094-3.836l9.67-5.584c1.91-1.102 3.376-.212 3.276 2l-.534 11.756z" fill="#999"/><path d="M164.928 278l.5.865 14 24.25" stroke="#999" stroke-width="6"/><path d="M186.005 312.347c-.05 1.105-.884 1.59-1.87 1.08l-10.448-5.417c-1.96-1.016-2.005-2.732-.094-3.836l9.67-5.583c1.91-1.102 3.376-.212 3.276 2l-.534 11.756z" fill="#999"/><g transform="translate(169)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="33.486" y="33">App.jsx</tspan></text></g><g transform="translate(56 198)"><rect stroke="#4077F7" x="1.5" y=".5" width="167" height="54" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="27.477" y="33">Header.ios.jsx</tspan></text></g><g transform="translate(56 134)"><rect stroke="#0CA40D" x=".5" y=".5" width="167" height="54" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="8.458" y="33">Header.android.jsx</tspan></text></g><g transform="translate(258 122)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="28.986" y="33">Body.jsx</tspan></text></g><g transform="translate(0 325)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="37.986" y="33">Image</tspan></text></g><g transform="translate(151 325)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 191)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 260)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 329)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 397)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="45.497" y="33">Text</tspan></text></g><path fill="#999" d="M318.5 186.5v241h6v-241z"/><path d="M323 218.5h29" stroke="#999" stroke-width="6"/><path d="M363.284 217.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836l9.914 6.34z" fill="#999"/><path d="M323 356.5h29" stroke="#999" stroke-width="6"/><path d="M363.284 355.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836l9.914 6.34z" fill="#999"/><path d="M323 287.5h29" stroke="#999" stroke-width="6"/><path d="M363.284 286.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836l9.914 6.34z" fill="#999"/><path d="M323 423.5h29" stroke="#999" stroke-width="6"/><path d="M363.284 422.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836l9.914 6.34z" fill="#999"/></g></svg>
|
||||
<svg width="498" height="452" viewBox="0 0 498 452" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect stroke="#979797" stroke-width="3" x="48.5" y="123.5" width="183" height="141" rx="10"/><path d="M207.75 67.246l-.5.865-14 24.25" stroke="#999" stroke-width="6"/><path d="M186.673 101.593c.05 1.106.884 1.59 1.87 1.08l10.448-5.416c1.961-1.017 2.005-2.733.094-3.836l-9.67-5.584c-1.91-1.102-3.376-.212-3.276 2l.534 11.756z" fill="#999"/><path d="M117.428 278.254l-.499.864-14 24.25" stroke="#999" stroke-width="6"/><path d="M96.351 312.6c.05 1.106.884 1.591 1.87 1.08l10.448-5.416c1.961-1.017 2.006-2.733.095-3.836l-9.672-5.584c-1.908-1.102-3.375-.212-3.274 2l.533 11.756z" fill="#999"/><path d="M255.25 67.246l.5.865 14 24.25" stroke="#999" stroke-width="6"/><path d="M276.327 101.593c-.05 1.106-.884 1.59-1.87 1.08l-10.448-5.416c-1.961-1.017-2.005-2.733-.094-3.836l9.67-5.584c1.91-1.102 3.376-.212 3.276 2l-.534 11.756z" fill="#999"/><path d="M164.928 278l.5.865 14 24.25" stroke="#999" stroke-width="6"/><path d="M186.005 312.347c-.05 1.105-.884 1.59-1.87 1.08l-10.448-5.417c-1.96-1.016-2.005-2.732-.094-3.836l9.67-5.583c1.91-1.102 3.376-.212 3.276 2l-.534 11.756z" fill="#999"/><g transform="translate(169)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="33.486" y="33">App.js</tspan></text></g><g transform="translate(56 198)"><rect stroke="#4077F7" x="1.5" y=".5" width="167" height="54" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="27.477" y="33">Header.ios.js</tspan></text></g><g transform="translate(56 134)"><rect stroke="#0CA40D" x=".5" y=".5" width="167" height="54" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="8.458" y="33">Header.android.js</tspan></text></g><g transform="translate(258 122)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="28.986" y="33">Body.js</tspan></text></g><g transform="translate(0 325)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="37.986" y="33">Image</tspan></text></g><g transform="translate(151 325)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 191)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 260)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 329)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="45.497" y="33">Text</tspan></text></g><g transform="translate(372 397)"><rect stroke="#999" stroke-width="3" x="1.5" y="1.5" width="123" height="52" rx="8"/><text font-family="Helvetica" font-size="18" fill="#3D3D3D"><tspan x="45.497" y="33">Text</tspan></text></g><path fill="#999" d="M318.5 186.5v241h6v-241z"/><path d="M323 218.5h29" stroke="#999" stroke-width="6"/><path d="M363.284 217.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836l9.914 6.34z" fill="#999"/><path d="M323 356.5h29" stroke="#999" stroke-width="6"/><path d="M363.284 355.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836l9.914 6.34z" fill="#999"/><path d="M323 287.5h29" stroke="#999" stroke-width="6"/><path d="M363.284 286.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836l9.914 6.34z" fill="#999"/><path d="M323 423.5h29" stroke="#999" stroke-width="6"/><path d="M363.284 422.42c.932.596.935 1.561 0 2.16l-9.915 6.34c-1.86 1.19-3.369.37-3.369-1.837v-11.167c0-2.204 1.504-3.029 3.37-1.836l9.914 6.34z" fill="#999"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Reference in New Issue
Block a user