Question

我正在使用react-native在android中开发应用程序。问题是当我使用WebView时，它只能在某些设备上运行，大部分是在android上具有较早操作系统的设备上。

我尝试使用this代码并对其进行了一些修改。它可以在某些手机上使用，但是webview内的元素不会显示在我自己的手机上。它应该像this一样呈现，而应该像this

那样呈现

这是ListSoal.js的代码段，其中包含WebView的代码

import React, { Component } from 'react'
import {
  ScrollView,
  TouchableOpacity,
  Alert,
  Image,
  Modal,
  Text,
  BackHandler,
  WebView,
  AsyncStorage,
  Dimensions,
  Platform
} from 'react-native'

const injectedScript = function () {
  function waitForBridge () {
    if (window.postMessage.length !== 1) {
      setTimeout(waitForBridge, 200)
    } else {
      let height = 0
      if (document.documentElement.clientHeight > document.body.clientHeight) {
        height = document.documentElement.clientHeight
      } else {
        height = document.body.clientHeight
      }

    }
    window.postMessage(height)
  }
  waitForBridge()
}

export default class ListSoal
  extends Component {
  state = {
    webViewHeight: Number,
    webViewHeightAnswer: Number
  }

  static defaultProps = {
    autoHeight: true,
    autoHeightAnswer: true
  }

  constructor (props) {
    super(props)
    this.state = {
      webViewHeight: this.props.defaultHeight,
      webViewHeightAnswer: this.props.defaultHeight
    }
    this._onMessage = this._onMessage.bind(this)
    this._onMessageAnswer = this._onMessageAnswer.bind(this)
  }

  _onMessage (e) {
    this.setState({
      webViewHeight: parseInt(e.nativeEvent.data)
    })
  }

  _onMessageAnswer (e) {
    this.setState({
      webViewHeightAnswer: parseInt(e.nativeEvent.data)
    })
  }

  render () {
    const { loading } = this.state
    if (loading === true) {
      return <CommonIndicator color={'#eb6a16'} size={'large'} />
    }

    if (this.state.soals.length <= 0) {
      return (
        <View style={styles.notContent}>
          <Text style={styles.textNull}>{strings.exercises.notExercises}</Text>
        </View>
      )
    }
    const _w = this.props.width || Dimensions.get('window').width - '5%'
    const _wA = this.props.width || 265
    const _h = this.props.autoHeight ? this.state.webViewHeight : this.props.defaultHeight
    const _hA = this.props.autoHeightAnswer ? this.state.webViewHeightAnswer : this.props.defaultHeight
    const { animate, soals, no, totalQuestion, displayNumber, selected } = this.state
    return (
      <View style={styles.mainContainer}>
        <View style={styles.topButtonGroup}>
          <View style={{flexDirection: 'row', width: '100%', justifyContent: 'space-between'}}>
            <View style={{width: '50%'}}>
              <TouchableOpacity
                onPress={() => this.onNumberModal()}
                style={styles.btnNumber}>
                <Text style={styles.textbutton}>{strings.exercises.number}</Text>
              </TouchableOpacity>
            </View>

            <View style={{width: '50%'}}>
              {
                loading === true
                  ? null
                  : soals[no].question.solution_id === null
                    ? <View
                      style={[styles.btnSale, {backgroundColor: '#dddddd'}]}>
                      <Text style={styles.textbutton}>{strings.exercises.solution}</Text>
                    </View>
                    : <TouchableOpacity
                      onPress={() => this.checkSolution()}
                      style={styles.btnSale}>
                      <Text style={styles.textbutton}>{strings.exercises.solution}</Text>
                    </TouchableOpacity>
              }
            </View>
          </View>
          <View style={{flex: 1}} />
        </View>
        <View style={styles.backgquestion}>
          <ScrollView>
            <View animation={animate} duration={1100} style={styles.listquestion}>
              <View style={styles.modal}>
                <Text style={styles.number}>Number: {displayNumber + 1}</Text>
              </View>
              {
                soals[no].question.image === null ? null : <Image resizeMode={'stretch'} source={{uri: config.storageUrl + soals[no].question.image}} style={styles.imagequestion} />
              }
              <View style={styles.soals}>
                <WebView
                  scalesPageToFit={Platform.OS !== 'ios'}
                  ref={(ref) => { this.webview = ref }}
                  injectedJavaScript={'(' + String(injectedScript) + ')();'}
                  scrollEnabled={this.props.scrollEnabled || false}
                  onMessage={this._onMessage}
                  javaScriptEnabled={true}
                  automaticallyAdjustContentInsets={true}
                  {...this.props}
                  source={{html: soals[no].question.question}}
                  style={[{width: _w}, this.props.style, {height: _h}]}
                />
              </View>

我尝试过多次更改flex属性，但是问题似乎出在height = document.body.clientHeight或height document.elementBody.clientHeight上，因为当我将其更改为整数时，它可以工作。有什么建议么？预先感谢

如何修复React Native Webview不显示元素

0 个答案: