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) 
     }) 
} 

이 출력됩니다 나는 안드로이드 에뮬레이터에서 테스트 할 때 어쨌든, 아랍어 텍스트와 같은 이상한 문자에 표시됩니다

,691 :

이

는 브라우저 콘솔 로그입니다

이 문제를 해결하려면 어떻게해야합니까? 미리 감사드립니다.

이것은 이제 내 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

다음은 저에게 도움이되는 해결책입니다. WebView의 source 속성에 baseUrl : ''을 추가하십시오. 그러면 UTF-8이 올바르게 표시됩니다!

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

Answer 2

내 솔루션입니다 웹뷰 source={{ uri: }} 대신 source={{ html: }}을 사용하는 것입니다. 이상한 아랍 문자는 uri을 사용할 때 잘 표현됩니다.

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

나는 이에 대해 좋은 설명을 찾을 수 없다. 그러나이 솔루션은 내 문제를 해결했습니다.