mirror of
https://github.com/status-im/react-native.git
synced 2025-01-16 20:44:10 +00:00
f4a8efa452
Summary: This PR adds the interactive [React Native Web Player](http://dabbott.github.io/react-native-web-player/) to the docs. The web player is an embeddable iframe which runs React Native code using components from [react-native-web](https://github.com/necolas/react-native-web). For now, it's primarily for educational purposes, since only the basic components are implemented. Some details: - The iframe is loaded from MaxCDN using rawgit, locked down to a git tag. - Asset paths (i.e. images) are resolved relative to `//facebook.github.io/react-native/` - When viewed on mobile, it falls back to the syntax-highlighted code blocks. The WebPlayer can be inserted into markdown by using the fences: ``` ```ReactNativeWebPlayer import ... AppRegistry.registerComponent ... `` ` ```  I didn't actually add the WebPlayer to any docs pages in this PR. That we c Closes https://github.com/facebook/react-native/pull/8328 Differential Revision: D3471527 Pulled By: lacker fbshipit-source-id: 704da41cd77e08c7e2bc820557a74d36e88e8eb7
69 lines
1.8 KiB
JavaScript
69 lines
1.8 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 WebPlayer
|
|
*/
|
|
|
|
var React = require('React');
|
|
var Prism = require('Prism');
|
|
|
|
/**
|
|
* Use the WebPlayer by including a ```ReactNativeWebPlayer``` block in markdown.
|
|
*
|
|
* Optionally, include url parameters directly after the block's language. For
|
|
* the complete list of url parameters, see: https://github.com/dabbott/react-native-web-player
|
|
*
|
|
* E.g.
|
|
* ```ReactNativeWebPlayer?platform=android
|
|
* import React from 'react';
|
|
* import { AppRegistry, Text } from 'react-native';
|
|
*
|
|
* const App = () => <Text>Hello World!</Text>;
|
|
*
|
|
* AppRegistry.registerComponent('MyApp', () => App);
|
|
* ```
|
|
*/
|
|
var WebPlayer = React.createClass({
|
|
parseParams: function(paramString) {
|
|
var params = {};
|
|
|
|
if (paramString) {
|
|
var pairs = paramString.split('&');
|
|
for (var i = 0; i < pairs.length; i++) {
|
|
var pair = pairs[i].split('=');
|
|
params[pair[0]] = pair[1];
|
|
}
|
|
}
|
|
|
|
return params;
|
|
},
|
|
|
|
render: function() {
|
|
var hash = `#code=${encodeURIComponent(this.props.children)}&runApp=AwesomeProject`;
|
|
|
|
if (this.props.params) {
|
|
hash += `&${this.props.params}`;
|
|
}
|
|
|
|
return (
|
|
<div className={'web-player'}>
|
|
<Prism>{this.props.children}</Prism>
|
|
<iframe
|
|
style={{marginTop: 4}}
|
|
width='880'
|
|
height={this.parseParams(this.props.params).platform === 'android' ? '425' : '420'}
|
|
data-src={`//cdn.rawgit.com/dabbott/react-native-web-player/v0.1.2/index.html${hash}`}
|
|
frameBorder='0'
|
|
/>
|
|
</div>
|
|
);
|
|
},
|
|
});
|
|
|
|
module.exports = WebPlayer;
|