mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 17:45:59 +00:00
b8542397cd
Summary: React Native Playground has been sunset, so I've replaced the examples that previously used it with examples using [Snack](http://snack.expo.io/). The examples are directly embedded and can be edited live to see updates. The code itself is also in the docs, so we can easily update the docs in one place and we don't have to actually go to a saved app on Snack and update it there. Run it locally, go to the `Animations` section and the `Direct Manipulation` section.  Open it on your phone, notice that it falls back to just showing plain code. <img src="https://cloud.githubusercontent.com/assets/90494/24638547/203ec8fc-189e-11e7-99c8-dfabff949f8d.PNG" width="250"> - Get rid of the Expo new user experience dialog that you see when you open a Snack -- is this a dealbreaker Closes https://github.com/facebook/react-native/pull/13285 Differential Revision: D4828011 Pulled By: hramos fbshipit-source-id: 684ad24a14deb72abb8587ffbb726d316f126d75
345 lines
12 KiB
JavaScript
345 lines
12 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule Site
|
|
*/
|
|
'use strict';
|
|
|
|
var HeaderLinks = require('HeaderLinks');
|
|
var Metadata = require('Metadata');
|
|
var React = require('React');
|
|
|
|
var Site = React.createClass({
|
|
render: function() {
|
|
const path = Metadata.config.RN_DEPLOYMENT_PATH;
|
|
const version = Metadata.config.RN_VERSION;
|
|
const algoliaVersion = version === 'next' ? 'master' : version;
|
|
var basePath = '/react-native/' + (path ? path + '/' : '');
|
|
var currentYear = new Date().getFullYear();
|
|
|
|
var title = this.props.title
|
|
? this.props.title
|
|
: 'React Native | A framework for building native apps using React';
|
|
|
|
var metaTags = [
|
|
{ charSet: 'utf-8' },
|
|
{
|
|
httpEquiv: 'X-UA-Compatible',
|
|
content: 'IE=edge,chrome=1',
|
|
},
|
|
{
|
|
name: 'viewport',
|
|
content: 'width=device-width',
|
|
},
|
|
// Facebook
|
|
{ property: 'fb:app_id', content: '1677033832619985' },
|
|
{ property: 'fb:admins', content: '121800083' },
|
|
// Open Graph
|
|
{
|
|
property: 'og:site_name',
|
|
content: 'React Native',
|
|
},
|
|
{
|
|
property: 'og:title',
|
|
content: title,
|
|
},
|
|
{
|
|
property: 'og:url',
|
|
content: 'https://facebook.github.io/react-native/' +
|
|
(this.props.path ? this.props.path : 'index.html'),
|
|
},
|
|
{
|
|
property: 'og:image',
|
|
content: this.props.image
|
|
? this.props.image
|
|
: 'https://facebook.github.io/react-native/img/opengraph.png',
|
|
},
|
|
{
|
|
property: 'og:description',
|
|
content: this.props.description
|
|
? this.props.description
|
|
: 'A framework for building native apps using React',
|
|
},
|
|
// Twitter Cards
|
|
{
|
|
name: 'twitter:site',
|
|
content: '@reactnative',
|
|
},
|
|
{
|
|
name: 'twitter:card',
|
|
content: 'summary_large_image',
|
|
},
|
|
];
|
|
|
|
var typeTags = [
|
|
{
|
|
property: 'og:type',
|
|
content: 'website',
|
|
},
|
|
];
|
|
if (this.props.author) {
|
|
typeTags = [
|
|
{
|
|
property: 'og:type',
|
|
content: 'article',
|
|
},
|
|
{
|
|
property: 'article:author',
|
|
content: this.props.author,
|
|
},
|
|
];
|
|
}
|
|
metaTags.push(...typeTags);
|
|
|
|
if (this.props.authorTwitter) {
|
|
metaTags.push({
|
|
name: 'twitter:creator',
|
|
content: '@' + this.props.authorTwitter,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<html>
|
|
<head>
|
|
<title>{title}</title>
|
|
{metaTags.map((tag, index) => <meta key={index} {...tag} />)}
|
|
|
|
<base href={basePath} />
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"
|
|
/>
|
|
|
|
<link rel="shortcut icon" href="img/favicon.png?2" />
|
|
<link rel="stylesheet" href="css/react-native.css" />
|
|
|
|
<link
|
|
rel="alternate"
|
|
type="application/rss+xml"
|
|
title="React Native Blog"
|
|
href="https://facebook.github.io/react-native/blog/feed.xml"
|
|
/>
|
|
<link
|
|
href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
|
|
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js" />
|
|
<script type="text/javascript">
|
|
{'try{Typekit.load();}catch(e){}'}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: "window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));",
|
|
}}
|
|
/>
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: "window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));",
|
|
}}
|
|
/>
|
|
<div className="container">
|
|
<div className="nav-main">
|
|
<div className="wrap">
|
|
<a className="nav-home" href="">
|
|
<img src="img/header_logo.png" />
|
|
React Native
|
|
</a>
|
|
<a className="nav-version" href="/react-native/versions.html">
|
|
{version}
|
|
</a>
|
|
<HeaderLinks section={this.props.section} />
|
|
</div>
|
|
</div>
|
|
|
|
{this.props.children}
|
|
|
|
<footer className="nav-footer">
|
|
<section className="sitemap">
|
|
<a href="/react-native" className="nav-home">
|
|
<img
|
|
src="img/header_logo.png"
|
|
alt="React Native"
|
|
width="66"
|
|
height="58"
|
|
/>
|
|
</a>
|
|
<div>
|
|
<h5><a href="docs/">Docs</a></h5>
|
|
<a href="docs/getting-started.html">Getting Started</a>
|
|
<a href="docs/tutorial.html">Tutorial</a>
|
|
<a href="docs/integration-with-existing-apps.html">
|
|
Integration With Existing Apps
|
|
</a>
|
|
<a href="docs/more-resources.html">More Resources</a>
|
|
</div>
|
|
<div>
|
|
<h5><a href="/react-native/support.html">Community</a></h5>
|
|
<a href="/react-native/showcase.html">Showcase</a>
|
|
<a
|
|
href="http://www.meetup.com/topics/react-native/"
|
|
target="_blank">
|
|
Upcoming Events
|
|
</a>
|
|
<a
|
|
href="https://www.facebook.com/groups/react.native.community"
|
|
target="_blank">
|
|
Facebook Group
|
|
</a>
|
|
<a href="https://twitter.com/reactnative" target="_blank">
|
|
Twitter
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<h5><a href="/react-native/support.html">Help</a></h5>
|
|
<a
|
|
href="http://stackoverflow.com/questions/tagged/react-native"
|
|
target="_blank">
|
|
Stack Overflow
|
|
</a>
|
|
<a href="https://discord.gg/0ZcbPKXt5bZjGY5n">
|
|
Reactiflux Chat
|
|
</a>
|
|
<a href="/react-native/versions.html" target="_blank">
|
|
Latest Releases
|
|
</a>
|
|
<a
|
|
href="https://react-native.canny.io/feature-requests"
|
|
target="_blank">
|
|
Feature Requests
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<h5>More</h5>
|
|
<a href="/react-native/blog">Blog</a>
|
|
<a
|
|
href="https://github.com/facebook/react-native"
|
|
target="_blank">
|
|
GitHub
|
|
</a>
|
|
<a href="http://facebook.github.io/react/" target="_blank">
|
|
React
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<section className="newsletter">
|
|
<div id="mc_embed_signup">
|
|
<form
|
|
action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f"
|
|
method="post"
|
|
id="mc-embedded-subscribe-form"
|
|
name="mc-embedded-subscribe-form"
|
|
className="validate"
|
|
target="_blank"
|
|
noValidate>
|
|
<div id="mc_embed_signup_scroll">
|
|
<label htmlFor="mce-EMAIL">
|
|
<h5>Get the React Native Newsletter</h5>
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value=""
|
|
name="EMAIL"
|
|
className="email"
|
|
id="mce-EMAIL"
|
|
placeholder="email address"
|
|
required
|
|
/>
|
|
<div
|
|
style={{ position: 'absolute', left: '-5000px' }}
|
|
aria-hidden="true">
|
|
<input
|
|
type="text"
|
|
name="b_db0dd948e2b729ee62625b1a8_47cd41008f"
|
|
tabIndex="-1"
|
|
value=""
|
|
/>
|
|
</div>
|
|
<div className="clear">
|
|
<input
|
|
type="submit"
|
|
value="Sign up"
|
|
name="subscribe"
|
|
id="mc-embedded-subscribe"
|
|
className="button"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<a
|
|
href="https://code.facebook.com/projects/"
|
|
target="_blank"
|
|
className="fbOpenSource">
|
|
<img
|
|
src="img/oss_logo.png"
|
|
alt="Facebook Open Source"
|
|
width="170"
|
|
height="45"
|
|
/>
|
|
</a>
|
|
<section className="copyright">
|
|
Copyright © {currentYear} Facebook Inc.
|
|
</section>
|
|
</footer>
|
|
</div>
|
|
|
|
<div id="fb-root" />
|
|
<script
|
|
type="text/javascript"
|
|
src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"
|
|
/>
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
|
ga('send', 'pageview');
|
|
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
|
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
|
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
|
|
docsearch({
|
|
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
|
indexName: 'react-native-versions',
|
|
inputSelector: '#algolia-doc-search',
|
|
algoliaOptions: { facetFilters: [ "tags:${algoliaVersion}" ], hitsPerPage: 5 }
|
|
});
|
|
`,
|
|
}}
|
|
/>
|
|
<script src="js/scripts.js" />
|
|
{/* Mailchimp Inline form-submission script for the React Native newsletter sign up form */}
|
|
<script
|
|
type="text/javascript"
|
|
src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"
|
|
/>
|
|
<script
|
|
type="text/javascript"
|
|
dangerouslySetInnerHTML={{
|
|
__html: "(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);",
|
|
}}
|
|
/>
|
|
<script type="text/javascript" src="https://snack.expo.io/embed.js" />
|
|
</body>
|
|
</html>
|
|
);
|
|
},
|
|
});
|
|
module.exports = Site;
|