Bez popisu

index.ios.js 3.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. 'use strict'
  2. import React, {
  3. Component,
  4. PropTypes
  5. } from 'react';
  6. import {
  7. Dimensions,
  8. View,
  9. WebView
  10. } from 'react-native';
  11. export default class AutoHeightWebView extends Component {
  12. constructor(props) {
  13. super(props);
  14. this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
  15. const initialScript = props.files ? this.appendFilesToHead(props.files, BaseScript) : BaseScript;
  16. this.state = {
  17. height: 0,
  18. script: initialScript
  19. };
  20. }
  21. componentWillReceiveProps(nextProps) {
  22. let currentScript = BaseScript;
  23. if ((nextProps.files && !this.props.files) || (nextProps.files && this.props.files && JSON.stringify(nextProps.files) !== JSON.stringify(this.props.files))) {
  24. currentScript = this.appendFilesToHead(nextProps.files, BaseScript);
  25. }
  26. this.setState({ script: currentScript });
  27. }
  28. appendFilesToHead(files, script) {
  29. if (!files) {
  30. return script;
  31. }
  32. for (let file of files) {
  33. script =
  34. `
  35. var link = document.createElement('link');
  36. link.rel = '` + file.rel + `';
  37. link.type = '` + file.type + `';
  38. link.href = '` + file.href + `';
  39. document.head.appendChild(link);
  40. `+ script;
  41. }
  42. return script;
  43. }
  44. handleNavigationStateChange(navState) {
  45. const height = Number(navState.title);
  46. if (height) {
  47. this.setState({ height });
  48. if (this.props.onHeightUpdated) {
  49. this.props.onHeightUpdated(height);
  50. }
  51. }
  52. }
  53. render() {
  54. return (
  55. <View style={[{
  56. width: ScreenWidth,
  57. height: this.state.height + this.props.heightOffset,
  58. }, this.props.style]}>
  59. <WebView
  60. style={{ flex: 1 }}
  61. injectedJavaScript={this.state.script + this.props.customScript}
  62. scrollEnabled={false}
  63. source={{
  64. html: this.props.html,
  65. baseUrl: 'web/'
  66. }}
  67. onNavigationStateChange={this.handleNavigationStateChange} />
  68. </View>
  69. );
  70. }
  71. }
  72. AutoHeightWebView.propTypes = {
  73. html: PropTypes.string,
  74. onHeightUpdated: PropTypes.func,
  75. customScript: PropTypes.string,
  76. // offset rn webview margin
  77. heightOffset: PropTypes.number,
  78. style: View.propTypes.style,
  79. // add web/files... to project root
  80. files: PropTypes.arrayOf(PropTypes.shape({
  81. href: PropTypes.string,
  82. type: PropTypes.string,
  83. rel: PropTypes.string
  84. }))
  85. }
  86. AutoHeightWebView.defaultProps = {
  87. heightOffset: 12
  88. }
  89. const ScreenWidth = Dimensions.get('window').width;
  90. const BaseScript =
  91. `
  92. ; (function () {
  93. var wrapper = document.createElement('div');
  94. wrapper.id = 'height-wrapper';
  95. while (document.body.firstChild) {
  96. wrapper.appendChild(document.body.firstChild);
  97. }
  98. document.body.appendChild(wrapper);
  99. var i = 0;
  100. function updateHeight() {
  101. document.title = wrapper.clientHeight;
  102. window.location.hash = ++i;
  103. }
  104. updateHeight();
  105. window.addEventListener('load', function () {
  106. updateHeight();
  107. });
  108. window.addEventListener('resize', updateHeight);
  109. } ());
  110. `;