Html React Native：如何使用Webview阅读Wordpress的视频帖子？_Html_Wordpress_React Native_Webview

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

html wordpress react-native webview

Html React Native：如何使用Webview阅读Wordpress的视频帖子？,html,wordpress,react-native,webview,Html,Wordpress,React Native,Webview,我是个新手。我正在使用expo并尝试从WordPress读取数据。但问题出现在帖子包含视频时视频运行良好，但显示在屏幕内的视频大小大于屏幕大小。我尝试了scalesPageToFit={true}。然而，这对我来说并不管用。有没有办法解决这个问题 const styles = { featuredImage: { backgroundColor: 'black', width: window.width, height: 200 }, title: {

我是个新手。我正在使用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>
  );
      }

}

const styles={
特征图像：{
背景颜色：“黑色”，
宽度：window.width，
身高：200
},
标题：{
fontFamily:“roboto slab regular”，
尺寸：20，
线高：22，
玛金托普：16，
marginHorizontal:16
},
内容：{
弹性：1，
身高：400，
对齐项目：“中心”
},
元：{
玛金托普：16，
marginHorizontal:16，
}
}
导出默认类Post扩展组件{
webview=null；
建造师（道具）{
超级（道具）；
此.state={
塔曼霍：122，
post:props.post，
scalesPageToFit：是的，
};
}
_postMessage=（）=>{
this.webview.postMessage（“Hello”）；
控制台日志（“已发布消息”）；
scalesPageToFit=true
}
_receivedMessage=（e）=>{
控制台日志（“收到的消息”）；
this.setState（{tamanho:parseInt（e.nativeEvent.data）}）；
scalesPageToFit=true
}
componentDidMount（）{
这个。_postMessage（）；
}
render（）{
让post=this.state.post；
让HTML=''+
'' +
'' +
'' +
'' +
post.content.rendered+
'' +
'';
让javascript='window.location.hash=1；'+
'document.title=document.body.scrollHeight；'+
'window.postMessage（document.body.scrollHeight）；'；
返回(
{entities.decode（post.title.rendered）}
{this.webview=webview；}}
injectedJavaScript={javascript}
javaScriptEnabled={true}
JavaScriptEnabledDroid={true}
onMessage={this.\u receivedMessage}
scalesPageToFit={true}
allowsInlineMediaPlayback={true}
减速率=“正常”
style={style.content}
automaticallyAdjustContentInsets={false}
domStorageEnabled={true}
startInLoadingState={true}
source={{html:html}
/>
);
}
}

添加

width

属性，以使设备屏幕的webview适合

项目中的样式
import { Dimensions } from 'react-native';

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

将此代码段添加到样式中
content: {
    flex: 1,
    backgroundColor: 'yellow',
    width: deviceWidth,
    height: 400//deviceHeight
  }