在bottomTabNavigator上重新渲染Web视图

问题描述 投票:0回答:1

如何重新渲染运行在使用react native构建的应用程序中的网络视图。例如:每次我点击购物车标签时,都需要加载相同的网址。

这是购物车类别:

import React, { useState } from 'react';
import { ActivityIndicator, WebView, View, Button, ScrollView,
  RefreshControl,
  Text, } from 'react-native';
import Config from '../config';



export default class CarrinhoScreen extends React.Component {

  reload() {
    this.myWebView.reload()
  }

  render() {
    return (
    <>
        <View style={{ flex: 1 }}>
          <WebView
            source={{ uri: 'https://www.genieshopp.com/checkout/cart/' }}
            userAgent='bring-app'
            startInLoadingState={true}
            ref={(ref) => this.myWebView = ref}
          />
        </View>
    </>
    )
  }
};

这里是创建tabNavigator的位置:

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import CarrinhoScreen from '../screens/CarrinhoScreen';

const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
});

const CarrinhoStack = createStackNavigator(
  {
    Carrinho: CarrinhoScreen
  },
  config
);

CarrinhoStack.navigationOptions = {
  tabBarLabel: 'Carrinho',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-cart' : 'md-cart'}/>
  ),
};

CarrinhoStack.path = '';

const tabNavigator = createBottomTabNavigator(
{
  CarrinhoStack,
  },
  {
    backBehavior: 'history'
  }
);

tabNavigator.path = '';

export default tabNavigator;

我知道有myWebView.reload(),但是我想知道当切换底部标签或单击相同图标时如何重新加载它。

reactjs react-native webview
1个回答
0
投票

通过将resetOnBlur: CarrinhoScreen放在backBehavior: history之后解决您可以在此处放置要重置的任何其他屏幕。

© www.soinside.com 2019 - 2024. All rights reserved.