Question

我使用React Native WebView来显示文件中的html内容。我使用iOS模拟器测试过，它工作正常。但不知何故，当我在Android模拟器上测试它时，阿拉伯语文本显示不正确，而不是像ä，ö，ü这样的奇怪字符出现。

这是我的代码：

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

我的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的源属性。 UTF-8然后正确显示！

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

Answer 2

现在，我使用source={{ uri: fileUri }}并解决了我的问题。奇怪的角色消失了，阿拉伯文字显示得很好。

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

fileUri指的是文件物理路径的位置。

我找不到一个好的解释。但是这个解决方案解决了我的问题。

更新＃1

对于来自字符串（而不是来自文件）的WebView源，请参阅Virat18的答案。

Answer 3

RecyclerView recyclerView = new RecyclerView(getContext());
recyclerView.setLayoutManager(new LinearLayoutManager(getContext()))

为我修好了

React Native WebView Android：阿拉伯语文本显示为奇怪的角色

3 个答案:

更新＃1