Question

我正在用react navigaton和webview进行测试，我有两个屏幕，Home和Details，在details屏幕上我正在webview内调用/打开一个网页，假设我正在调用stackoverflow.com（A页），我的问题是，当用户单击stackoverflow页面的链接并导航并且想要返回到上一页（页面A）后，它没有走，而是转到或导航到主屏幕！如何让用户返回上一页。？这就是我调用页面的方式

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

@IBOutlet weak var state_label: UILabel!
@IBOutlet weak var descr_label: UILabel!
@IBOutlet weak var myimg: UIImageView!
let arr: [String] = ["Text1","Text2", "Text3", "Text4"]

var switch_isOn = false

override func viewDidLoad() {
    super.viewDidLoad()
    if(switch_isOn == false){
        myimg?.image = UIImage(named: "img1")
    }else{
        myimg?.image = UIImage(named: "img2")
    }
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return arr.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = UITableViewCell(style: UITableViewCellStyle.default, reuseIdentifier: "cell")
    cell.textLabel?.text = arr[indexPath.row]

    let mySwitch = UISwitch()
    cell.accessoryView = mySwitch

    mySwitch.tag = 1001

    return cell
}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let segueIdentifier: String
    segueIdentifier = "segue"

    // Get the selected Cell and Iterate through it's subviews to find the switch using the tag
    let cell = tableView.cellForRow(at: indexPath)

    //Get the Cell Text
    print("\(cell?.textLabel?.text ?? "")")

    // Iterate through subviews of Cell
    for v in cell?.subviews ?? [] {

        // If a view found with tag == 1001 then it's the switch view because we had assigned 1001 to the switch view
        if v.tag == 1001 {

            // One last check we cast the view to UISwitch if it succeed then it's the switch view
            if let mySwitch = v as? UISwitch {

                if(mySwitch.isOn == true){
                    descr_label?.text = "\(cell?.textLabel?.text ?? "")"
                    print("The cell has the Switch On")
                    switch_isOn = true
                }else{
                    descr_label?.text = "\(cell?.textLabel?.text ?? "")"
                    switch_isOn = false
                    print("The cell has the Switch Off")
                }
            }
        }
    }
    self.performSegue(withIdentifier: segueIdentifier, sender: self)
}

Answer 1

众所周知，iO并未提供内置的后退按钮，而android则提供了内置按钮。

因此，考虑这两个平台，有两种可能性。

Android。

->对于android，您必须定义BackHandler，所以这是步骤。

import就是这样。

import {BackHandler } from 'react-native'。

在生命周期方法中初始化backhandler。

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
}

handleBackPress = () => {
   if (this.state.canGoBack) {
      this.refWeb.goBack();
    }
  else{
    this.props.navigation.goBack(null)
    }
  return true;
}

在canGoBack内定义用户定义变量status。

  constructor(props) {
    super(props)

    this.state = {
      canGoBack: false
    }
   }

创建一种方法，该方法可检测Web视图的导航变化并将其与Web视图绑定。

 onNavigationStateChange(navState) {
      this.setState({
      canGoBack: navState.canGoBack
   });
 }

像这样绑定它。

        <WebView
            ref={(myWeb) => this.refWeb = myWeb}
            onNavigationStateChange={this.onNavigationStateChange.bind(this)}               
            source={{ uri: 'https://stackoverflow.com/questions/51712310/react- 
            native-webview-navigation-issue' }} />

然后准备好了。

iOs

对于iO，您不必费心。

在webview上方或根据您的设计逻辑创建一个用于后按的按钮
遵循上面的webview和导航逻辑。忘记了backhandler，并在您创建的onPress()的{{1}}的{{1}}方法的button方法中设置了此代码
```
backpress
```

注意：这里我使用if (this.state.canGoBack) { this.refWeb.goBack(); }else{ this.props.navigation.goBack(null) }进行屏幕导航，所以我使用了stackNavigator此代码。如果您不使用它，则不要考虑此代码，并在this.props.navigation.goBack(null)条件下用可行的导航器代码替换

谢谢..

反应本地Webview导航问题

1 个答案: