Question

我曾多次问过这个问题，但我得不到答案。我真的是一个初学者，并且需要一些帮助，请把它作为webview中的一个按钮我正在使用具有

的网络视图创建应用

app.js

import React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";
import TabScreen from './src/screens/tabscreen'
export default function App() {
  return (
    <TabScreen  />
  );
  }

Tabscreen.js

import React, { Component } from 'react';
import { Container, Header, Tab, Tabs, TabHeading, Icon, Text,Title,Button,Body,Left,Right } from 'native-base';
import Tab1 from './tabs/tab1';
import Tab2 from './tabs/tab2';
import Tab3 from './tabs/tab3';
import Tab4 from './tabs/tab4';
export default class TabsAdvancedExample extends Component {
  render() {
    return (
        
      <Container>
           
        <Header>
        


        </Header>
        
        <Tabs>
          <Tab heading={ <TabHeading><Icon name="cart" /><Text>السوق</Text></TabHeading>}>
            <Tab1 />
          </Tab>
          <Tab heading={ <TabHeading><Icon name="paper" /><Text>تصنيفات</Text></TabHeading>}>
            <Tab2 />
          </Tab>
          <Tab heading={ <TabHeading><Icon name="home" /><Text>مدونه</Text></TabHeading>}>
            <Tab3 />
          </Tab>
          <Tab heading={ <TabHeading><Icon name="add" /><Text>اضف منتجاتك</Text></TabHeading>}>
            <Tab4 />
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

Tab1.js（这是Web视图所在的位置）

import React from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";
export default function App() {
  return (
    <WebView source={{ uri: "http://catalogmasr.com" }} />
  );
  
  }

Answer 1

这是您如何在Web视图底部添加“后退”按钮的方法。希望这可以帮助：）

 import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { WebView } from 'react-native-webview';

export default class WebViewScreen extends React.Component {

  buttonOnPress = () => {
    console.warn('button Pressed')
  }

  constructor(props) {
    super(props);
    this.WEBVIEW_REF = React.createRef();
  }

  render() {
    return (
      <View style={styles.container}>
        <WebView
          source={{ uri: 'https://www.google.com' }}
          style={styles.webview}
          ref={this.WEBVIEW_REF}
        />

        <TouchableOpacity style={styles.button} onPress={() => this.WEBVIEW_REF.current.goBack()}>
          <Text style={{textAlign: 'center', color: '#FFFFFF'}}>Back Button</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'stretch',
  },
  webview: {
    flex: 1,
  },
  button: {
    padding: 20, 
    backgroundColor: '#2196f3', 
    justifyContent: 'center', 
    alignItems: 'center'
  }
});

后退按钮反应本机Web视图

1 个答案: