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

Question

使用 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 组件以作为后退按钮呈现给用户，只有在用户单击第二个页面的链接并返回到上一页之后。

标签： webviewcomponentsconditional-renderingtouchableopacity