React Native Android项目文本两端对齐失效，内容不显示求助

我来帮你搞定这个问题！你现在遇到的情况是用WebView加载带text-align:justify样式的HTML后，Android设备上完全看不到文本，这大概率是WebView的渲染配置或者HTML结构的问题，我整理了几个靠谱的修复步骤，你可以挨个试试：

1. 给WebView设置明确的尺寸 #

React Native的WebView默认可能没有足够的布局空间，导致内容无法渲染出来。你需要给它加上style={{ flex: 1 }}，让它占满父容器的空间：

<WebView
  style={{ flex: 1 }}
  // 其他属性...
/>

2. 使用完整的HTML结构 #

Android的WebView对不完整的HTML片段支持不太友好，建议把内容包裹在完整的html、head、body标签里，同时可以给body和p标签加上基础的边距样式，避免内容贴边：

const justifiedTextHtml = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0;
      padding: 10px;
      font-size: 16px;
    }
    p {
      text-align: justify;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo tortor ut ipsum pharetra sodales. Praesent sed diam non lacus convallis dapibus. Sed vulputate erat risus, ac hendrerit eros egestas id. Etiam pellentesque auctor ipsum, non cursus nisi gravida sed. Ut eget pretium risus. Curabitur a lectus odio. Etiam felis urna, pharetra ut odio in, tristique suscipit tortor. Cras vitae risus odio. Etiam a leo elit. Duis molestie fermentum mi vitae pretium. Morbi luctus semper quam, et suscipit nisi convallis dictum. Fusce sit amet est dapibus, interdum ante non, lacinia metus. Donec at nulla non ante consectetur vulputate. Cras tristique porttitor ligula quis posuere. Integer nec laoreet felis, at tempor leo. Ut et convallis quam.</p>
</body>
</html>
`;

3. 改用官方维护的react-native-webview库 #

从React Native 0.60版本开始，原来内置的WebView组件已经被废弃，移到了独立的react-native-webview库中。如果你还在用旧的导入方式，很可能会遇到兼容性问题：

首先安装库：

npm install react-native-webview
# 或者 yarn add react-native-webview

然后修改导入语句：

// 替换原来的 import { WebView } from 'react-native'
import { WebView } from 'react-native-webview';

4. 显式启用WebView的JavaScript和DOM存储 #

有时候显式开启这些配置能解决渲染异常，给WebView加上这两个属性：

<WebView
  style={{ flex: 1 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  source={{ html: justifiedTextHtml }}
/>

完整的修复后代码 #

把上面的点整合起来，最终的代码应该是这样的：

import React from "react" 
import { ScrollView, StyleSheet, View } from "react-native" 
import { WebView } from 'react-native-webview';

export default class App extends React.Component { 
  render() { 
    const justifiedTextHtml = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <style>
        body {
          margin: 0;
          padding: 10px;
          font-size: 16px;
        }
        p {
          text-align: justify;
          line-height: 1.5;
        }
      </style>
    </head>
    <body>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo tortor ut ipsum pharetra sodales. Praesent sed diam non lacus convallis dapibus. Sed vulputate erat risus, ac hendrerit eros egestas id. Etiam pellentesque auctor ipsum, non cursus nisi gravida sed. Ut eget pretium risus. Curabitur a lectus odio. Etiam felis urna, pharetra ut odio in, tristique suscipit tortor. Cras vitae risus odio. Etiam a leo elit. Duis molestie fermentum mi vitae pretium. Morbi luctus semper quam, et suscipit nisi convallis dictum. Fusce sit amet est dapibus, interdum ante non, lacinia metus. Donec at nulla non ante consectetur vulputate. Cras tristique porttitor ligula quis posuere. Integer nec laoreet felis, at tempor leo. Ut et convallis quam.</p>
    </body>
    </html>
    `;

    return ( 
      <ScrollView style={styles.container}> 
        <WebView
          style={{ flex: 1 }}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          source={{ html: justifiedTextHtml }}
        />
      </ScrollView> 
    ) 
  } 
} 

const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    backgroundColor: "#fff", 
    margin: 20 
  } 
}) 

你可以先试试这个完整代码，应该能看到两端对齐的文本正常显示在Android设备上了。如果还有问题，可以检查一下Android项目的WebView权限，或者更新react-native-webview到最新版本。

内容的提问来源于stack exchange，提问作者FabianoLothor