説明なし

index.ios.js 3.4KB

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