Я новичок в реакции на родную.Я использую экспо и пытаюсь прочитать данные из 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>
);
}
}
