React Native WebView Android：アラビア語のテキストが奇妙な文字として表示される

Question

React Native WebViewを使用して、ファイルからHTMLコンテンツを表示しています。 iOS Simulatorを使ってテストしましたが、うまくいきました。

Uこれは私のコードで、ö、ä：

：

render() { 
    const { content } = this.state 

    return (
     <View style={style.container}> 
      ... 

      <WebView 
       source={{ html: content }} 
       onMessage={(event) => this.playAudio.call(this, event.nativeEvent.data)} 
      /> 
     </View> 
    ) 
} 

componentDidMount() { 
    const { state } = this.props.navigation 

    RNFS.readFileAssets(`content/${state.params.item.id}`, 'utf8') 
     .then((content) => { 
      console.log('content', content) 
      this.setState({ ...this.state, content }) 
     }) 
     .catch((err) => { 
      console.log('error', err.message, err.code) 
     }) 
} 

これが出力され、私はAndroidのエミュレータでテストする場合でも、何とか、アラビア語のテキストは次のように、奇妙な文字にまで見せています

これは、ブラウザのコンソールログです：

これを解決するにはどうすればよいですか？前もって感謝します。

はこれがために今私のpackage.json

{ 
    "name": "doadzikirandroid", 
    "version": "0.0.1", 
    "private": true, 
    "scripts": { 
    "start": "node node_modules/react-native/local-cli/cli.js start", 
    "test": "jest" 
    }, 
    "dependencies": { 
    "moment": "^2.20.1", 
    "react": "16.0.0", 
    "react-native": "0.51.0", 
    "react-native-admob": "^2.0.0-beta.4", 
    "react-native-fs": "^2.9.6", 
    "react-native-gesture-handler": "^1.0.0-alpha.35", 
    "react-native-search-box": "^0.0.13", 
    "react-native-sound": "^0.10.4", 
    "react-native-tab-view": "^0.0.73", 
    "react-native-vector-icons": "^4.4.3", 
    "react-navigation": "^1.0.0-beta.22" 
    }, 
    "devDependencies": { 
    "babel-jest": "22.0.4", 
    "babel-preset-react-native": "4.0.0", 
    "jest": "22.0.4", 
    "react-test-renderer": "16.0.0" 
    }, 
    "jest": { 
    "preset": "react-native" 
    } 
} 

Answer 1

私のために働いた解決策は次のとおりです。 baseUrl： ''をWebViewのsourceプロパティに追加します。 UTF-8が正しく表示されます！

<WebView 
source={{baseUrl: '', html: "Your HTML content here"}} 
style={} 
bounces={true}/> 

Answer 2

私の解決策であるWebViewのsource={{ uri: }}代わりのsource={{ html: }}を使用することです。 uriを使用すると、奇妙なアラビア文字がうまく表現されます。

<WebView source={{ uri: fileUri }} /> 

私はこれについて良い説明を見つけることができません。しかし、この解決策は私の問題を解決しました。