问题描述
我在带TypeScript的Android上使用React Native 0.63，没有任何展示，值得一提的是react-native-orientation-locker。
我制作了这样的Embed组件：
const Embed: FC<Props> = ({ embed }: Props) => {
const { width,height } = useDimensions().window
console.log(`WIDTH = ${width}`)
// Return 411
const getSource = (embedCodeOrURI: string): (WebViewSourceUri & string) | (WebViewSourceHtml & string) => {
if (embed.startsWith('http')) {
console.log(`DEBUG > Embed > returned { uri: ${embed}}`)
return { uri: embedCodeOrURI } as WebViewSourceUri & string
}
console.log(`DEBUG > Embed > returned { html: ${embed}}`)
// If I use the test content,I still need to specify the height in the style prop but the width adjust correctly
const test =
'<div style="background-color:red"><p style="font-size:32pt">"Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>'
// Using the wrapper or not has zero impact on the bug
const withWrapper = `
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="baseDiv" style={max-width: 100%;max-height: 100%}>${embedCodeOrURI}</div>
</body>
</html>
`
const html = withWrapper
return { html } as WebViewSourceHtml & string
}
if (!embed) {
console.log(`ERROR > Embed > embed = ${embed}`)
return null
}
return (
<WebView
originWhitelist={['*']}
source={getSource(embed)}
scalesPagetoFit={true}
containerStyle={{ backgroundColor: 'blue',height: 800 }}
allowsFullscreenVideo={true}
onError={(syntheticEvent): void => {
const { nativeEvent } = syntheticEvent
console.warn('ERROR > Embed > WebView error: ',nativeEvent)
}}
onHttpError={(syntheticEvent): void => {
const { nativeEvent } = syntheticEvent
console.warn('ERROR > Embed > WebView http error: ',nativeEvent.statusCode)
}}
onRenderProcessGone={(syntheticEvent): void => {
const { nativeEvent } = syntheticEvent
console.warn('WebView Crashed: ',nativeEvent.didCrash)
}}
onContentProcessDidTerminate={(syntheticEvent): void => {
const { nativeEvent } = syntheticEvent
console.warn('ERROR > Embed > Content process terminated: ',nativeEvent)
}}
startInLoadingState={true}
renderLoading={(): ReactElement => <ActivityIndicator />}
/>
)
}
export default Embed
首先奇怪的是，我测试了Twitter或Instagram嵌入411宽度的显示器：
第二个奇怪的事情是，如果我使用useDimensions（）。window.width（= 411）作为containerStyle宽度，则不会改变。
...但是，如果我添加width = 600，则显示比例尺。
第三点，如果我没有指定宽度，则测试html会显示完整宽度。
...，如果我指定600，它将在屏幕外扩展：
奇怪的是，如果我不在容器视图中添加高度，则html内容根本不会显示。
解决方法
我通过在头上添加这个来解决不同比例的问题：
<head>
<meta charset="utf-8">\
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
我仍然需要指定一个高度，因此我目前针对数据库中的每个帖子手动进行调整。