反应原生 webview 从右到左的语言组件，用镜像书写 ios 17 来显示

Question

我有一个React Native应用程序，其中包含一个Web视图，Web视图的内容是希伯来语（一种从右到左的语言），在iOS 17上我得到一个奇怪的结果，并且所有列表都显示为镜像写入，也在镜像写入中打开文件输入对话框，长按输入时也得到镜像写入。有什么帮助吗？附截图、、

反应本机代码：

 <WebView ref={webViewRef} source={{ html: `<!DOCTYPE html>
<html dir="rtl" lang="he">
<head>
<meta charset="utf-8">
</head>
<body>

<h1>דף נסיון</h1>

<p>דוגמא לקומבו</p>
<form action="/action_page.php">
  <label for=”cars">בחר צבע</label>
  <select name="cars" id="cars">
    <option value="volvo">ירוק</option>
    <option value="saab">כחול</option>
    <option value="opel">אדום</option>
    <option value="audi">צהוב</option>
  </select>
  <br><br>

<label for=”myfile">דוגמא לקובץ</label>
<br><br>
<input type="file" id="myfile" name=“myfile">
<br><br>

<label for=”text1">דוגמא לטקסט</label>
<br><br>
<input type="text" id="text1" name="text1" placeholder="נסיון">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>` }} onError={onWebViewError} onLoadStart={onWebViewLoadStart} onLoadEnd={onWebViewLoadEnd}
                onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} originWhitelist={['http://*', 'https://*', 'intent://*', 'tel:*', 'WebBrowser:*', 'webbrowser:*']}
                onNavigationStateChange={(navState) => { setCanGoBack(navState.canGoBack) }} sharedCookiesEnabled={true} 
                mediaPlaybackRequiresUserAction={false} javaScriptEnabled={true} nativeConfig={{props: {webContentsDebuggingEnabled: true}}}/>

它不会在其他版本的 iOS 上重现。

Answer 1

要在 React Native 中渲染 HTLM 并无缝更改内容 LTR 和 RTL，可以使用

react-native-render-html

和

react-native-webview

的组合

1.安装两个软件包；

yarn add react-native-render-html react-native-webview

2.在webview中渲染html

import RenderHTML from 'react-native-render-html';
import WebView from 'react-native-webview';

<RenderHTML
   renderers={{iframe: IframeRenderer}}
   WebView={WebView}
   renderersProps={{autoplay: true}}
   customHTMLElementModels={{
   iframe: iframeModel,
    }}
   source={{
   html: `<iframe width=${wp('85%')} height='250' src=${source)} 
   </iframe>`}}
   contentWidth={wp('100%')}
   tagsStyles={{
   body: {
   textAlign: language === 'Arabic' ? 'left' : '',
    },
   }}
 />

3.说明

tagsStyles={{
   body: {
    : language === 'Arabic' ? 'left' : '',
    },
  }}

tagsStyle 根据您的语言轻松切换内容。因为我使用阿拉伯语和英语。当选择阿拉伯语时，内容会自动更改为 RLT，反之亦然。

反应原生 webview 从右到左的语言组件，用镜像书写 ios 17 来显示

问题描述投票：0回答：1

1个回答

最新问题

反应原生 webview 从右到左的语言组件，用镜像书写 ios 17 来显示

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1