使用WebView更改默认页面时如何进行条件渲染TouchableOpacity？

编程问答 2022-04-24

问题描述

使用WebView更改默认页面时如何进行条件渲染？我想呈现一个 TouchableOpacity 组件以作为后退按钮呈现给用户，只有在用户单击第二页的链接并返回上一页之后。

My NavigationView.js

import * as React from 'react';
import { View,StyleSheet,TouchableOpacity,Animated } from 'react-native';
import { AntDesign} from "@expo/vector-icons";


const NavigationView = ({ onBackPress }) => (
<View style={[styles.container2]}>
        <TouchableOpacity style={[ styles.container2,styles.button,styles.menu]} onPress={onBackPress}>
          <Animated.View>
            <AntDesign name="back"size={28} color="#fff"/>
          </Animated.View>
        </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
  container2: {
    alignItems: 'flex-start',justifyContent: 'flex-end',marginHorizontal:3,marginVertical: 2,},title: {
    fontSize: 20,fontWeight: 'bold',separator: {
    marginVertical: 30,height: 1,width: '80%',button: {
    position: "absolute",width: 55,height: 55,borderRadius: 55 / 2,alignItems: "center",justifyContent: "center",shadowRadius: 10,shadowColor: "#2f95dc",shadowOpacity: 0.3,shadowOffset: { height: 10}    
  },menu : { 
    backgroundColor: "#2f95dc",}
});

export default NavigationView;

如何使用 webview 使后退按钮仅在用户走到下一页后才出现。当用户返回到初始 webview 中呈现的页面时，该按钮将再次隐藏。

My TabAtualidadesScreen.js

import * as React from 'react';
import { WebView } from 'react-native-webview';
import { useState,useEffect,useRef,Component} from 'react';
import {Text,View } from '../components/Themed';
import * as Progress from 'react-native-progress';
import NavigationView from '../navigation/NavigationView';
import { isLoading } from 'expo-font';


const TabAtualidadesScreen = () => {

  const [progress,setProgress] = useState(0);
  const [isLoaded,setLoaded] = useState(false);

  const webViewRef = useRef();
  const [canGoBack,setCanGoBack] = useState(false);

  const handleBackPress = () => {
    webViewRef.current.goBack();
  }

  
  return <>
  {
    !isLoaded ?
    <Progress.Bar 
    borderWidth={0}s
    borderRadius={0}
    color='#2778a3'
    progress={progress} 
    width={null} 
    />
    : null
  }
 
  <WebView
    ref={webViewRef}
    source={{ uri: 'yourInitialUrl' }} 
    
    onLoadEnd={() => setLoaded(true) }
    onLoadProgress={({nativeEvent}) => setProgress(nativeEvent.progress)}

    onNavigationStateChange={(state) => {
      const back = state.canGoBack;
      setCanGoBack(back);

      setWebViewUrlChanged = webviewState => {
        if (webviewState.url !== yourInitialUrl) {
          this.setState({ isWebViewUrlChanged: true });
          {<NavigationView onBackPress={handleBackPress}/>}
        }
      };
    }}
    
  />
  
</>
}

export default TabAtualidadesScreen;

使用WebView更改默认页面时如何进行条件渲染？我想呈现一个 TouchableOpacity 组件以作为后退按钮呈现给用户，只有在用户单击第二页的链接并返回上一页之后。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

componentscomponentsconditional-renderingtouchableopacitytouchableopacitywebviewwebview