Экран мигает один раз при рендеринге WebView на Android - PullRequest
Новая
       9

Экран мигает один раз при рендеринге WebView на Android

0 голосов
/ 10 января 2019

Я использую react-native-webview для визуализации WebView в моем приложении React Native. Все отлично работает на iOS, но на Android, когда отображается WebView, мой экран мигает (черный, затем белый, затем отображается веб-страница).

Согласно этому ответу я пытался добавить android:hardwareAccelerated="false" в тег <application> моего AndroidManifest.xml, но это не решает мою проблему. (Кроме того, он скрывает все эффекты тени, созданные с помощью свойства стиля elevation) 

<DelayedComponent key={key} style={{ height: 200, ...style }}>
  <WebView
    style={{ alignSelf: "stretch" }}
    source={{ uri: /* a youtube url */ }}
    renderLoading={() => <Loading />}
    startInLoadingState={true}
    scrollEnabled={false}
  />
</DelayedComponent>

<DelayedComponent> - это всего лишь тестовый компонент, который визуализирует <WebView> через одну секунду (используя базовый setTimeout). 

export class DelayedComponent extends React.PureComponent<
  { delay?: number; renderLoading?: any } & ViewProps,
  { show: boolean }
> {
  constructor(props) {
    super(props);
    this.state = { show: false };
  }

  public render() {
    console.log("RENDER DELAYED", this.state);
    const loadingComp = this.props.renderLoading || (
      <Text>Just wait a second...</Text>
    );
    const { delay, renderLoading, ...forwardProps } = this.props;
    return (
      <View {...forwardProps}>
        {this.state.show ? this.props.children : loadingComp}
      </View>
    );
  }

  public async componentDidMount() {
    const delay = this.props.delay || 1000;
    await (() => new Promise(resolve => setTimeout(resolve, delay)))();
    this.setState({ show: true });
  }
}

Экран мигает через одну секунду после визуализации <DelayedComponent>, когда отображается <WebView>.

Вот ссылка на видео, показывающее, что происходит: https://drive.google.com/open?id=1dX7ofANFI9oR2DFCtCRgI3_0DcsOD12B

Я ожидаю, что при рендеринге WebView экран не мигает, как это происходит на устройствах iOS.

Спасибо за помощь!

1 Ответ

0 голосов
/ 16 февраля 2019

Просто установите непрозрачность для стиля WebView равным 0,99.

<WebView style={{ opacity: 0.99 }} />

Это, вероятно, связано с: Рендеринг веб-просмотра на устройстве Android перекрывает предыдущих братьев и сестер от того же родителя

Редактировать: Оборачивание компонента WebView в View с overflow: 'hidden': <View style={{flex: 1, overflow: 'hidden'}}><WebView ... /></View> также работает, но по некоторым причинам может иногда приводить к сбоям приложения.

...