Question

我在本机反应方面很陌生。我正在使用expo，并试图从WordPress中读取数据。但是问题出在帖子包含视频时。

视频运行良好，但其中显示的视频尺寸大于屏幕尺寸。我已经尝试过scalesPageToFit={true}。但是，它对我不起作用。有什么办法可以解决这个问题？

const styles = {
  featuredImage: {
    backgroundColor: 'black',
    width: window.width,
    height: 200
  },
  title: {
    fontFamily: 'roboto-slab-regular',
    fontSize: 20,
    lineHeight: 22,
    marginTop: 16,
    marginHorizontal: 16
  },

    content: {
        flex: 1,
        height: 400, 
        alignItems: 'center'

    },

  meta: {
    marginTop: 16,
    marginHorizontal: 16,

  }
}




export default class Post extends Component {
     webview = null;

    constructor(props) {
        super(props);

        this.state = {
            tamanho: 122,
            post: props.post,
         scalesPageToFit: true,

        };
    }

    _postMessage = ( ) => {
        this.webview.postMessage( "Hello" );
        console.log( "Posted message" );
        scalesPageToFit=true
    }

    _receivedMessage = ( e )  => {
        console.log("Received message");
        this.setState( { tamanho: parseInt(e.nativeEvent.data)} );
                scalesPageToFit=true

    }

    componentDidMount() {
        this._postMessage();
    }



 render() {
        let post = this.state.post;

  let HTML ='<html>' +
                    '<head>' +
                        '<title></title>' +
                    '</head>' +
                    '<body>' +
                        post.content.rendered +
                    '</body>' +
                '</html>';





   let javascript =   'window.location.hash = 1;' +
                            'document.title = document.body.scrollHeight;' +
                            'window.postMessage( document.body.scrollHeight );';

  return (
    <View>
      <PostImage post={post} style={styles.featuredImage} showEmpty />
      <Text style={styles.title}>{entities.decode(post.title.rendered)}</Text>
      <PostMeta style={styles.meta} post={post} />




                        <WebView 
                        scrollEnabled={false}

                            ref={webview => { this.webview = webview; }}
                            injectedJavaScript={javascript}
                            javaScriptEnabled={true}
                            javaScriptEnabledAndroid={true}
                            onMessage={this._receivedMessage} 
                            scalesPageToFit={true}
                            allowsInlineMediaPlayback={true}
                            decelerationRate="normal"
                            style={styles.content}
                            automaticallyAdjustContentInsets={false}
                            domStorageEnabled={true}
                            startInLoadingState={true}
                            source={{html: HTML}} 

                             />



    </View>
  );
      }

}

Answer 1

将width属性添加到styles项目中的react-native中，以使网络视图适合设备屏幕。

import { Dimensions } from 'react-native';

const deviceWidth = Dimensions.get('window').width;

以样式

将其添加到以下代码段中

content: {
    flex: 1,
    backgroundColor: 'yellow',
    width: deviceWidth,
    height: 400//deviceHeight
  }

React Native：如何使用Webview从Wordpress阅读视频帖子？

1 个答案: