在 Expo React-Native 中通過 onClick 添加 WebView

Question

我需要一個函數來創建帶有 webview 的新屏幕。

我的博覽會應用程序的主屏幕包含一個“添加新頁面”按鈕，該按鈕鏈接到一個頁面，其中包含一個用於添加域、用戶名、密碼的表單。

如果這樣做，我想要一個包含所有頁面的主屏幕中的頁面列表。 例如，如果我使用生成的鏈接 http://user:password@myWebsite1.com 單擊“myWebsite1”，則該頁面應顯示在網絡視圖中。 網站 2、3 等也是如此。

任何人都知道如何做到這一點？

編輯：我添加了一些我現在擁有的代碼。 對於我創建的每個任務，webview 文件的域、用戶和密碼應更改並保存在此特定任務中。 （也打開onclick）。 我轉了一圈

這是我的 app.js，它首先打開 expo，它包含一個 Flatlist：

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View, FlatList, AsyncStorage, Button, TextInput, Keyboard, Platform, TouchableWithoutFeedback } from "react-native";
const isAndroid = Platform.OS == "android";
const viewPadding = 10;
const things = {things}

export default class NodeList extends Component {
  state = {
    tasks: [ ], 
    text: ""
  };

  changeTextHandler = text => {
    this.setState({ text: text });
  };

  addTask = () => {
    let notEmpty = this.state.text.trim().length > 0;

    if (notEmpty) {
      this.setState(
        prevState => {
          let { tasks, text } = prevState;
          return {
            tasks: tasks.concat({ key: tasks.length, text: text }),
            text: ""
          };
        },
        () => Tasks.save(this.state.tasks)
      );
    }
  };

  deleteTask = i => {
    this.setState(
      prevState => {
        let tasks = prevState.tasks.slice();

        tasks.splice(i, 1);

        return { tasks: tasks };
      },
      () => Tasks.save(this.state.tasks)
    );
  };

  componentDidMount() {
    Keyboard.addListener(
      isAndroid ? "keyboardDidShow" : "keyboardWillShow",
      e => this.setState({ viewMargin: e.endCoordinates.height + viewPadding })
    );

    Keyboard.addListener(
      isAndroid ? "keyboardDidHide" : "keyboardWillHide",
      () => this.setState({ viewMargin: viewPadding })
    );

    Tasks.all(tasks => this.setState({ tasks: tasks || [] }));
  }

  render() {
    return (
      <View
        style={[styles.container, { paddingBottom: this.state.viewMargin }]}
      >
         <Text style={styles.appTitle}>Nodes</Text>
        <FlatList
          style={styles.list}
          data={this.state.tasks}
          renderItem={({ item, index }) =>
            <View>
              <View style={styles.listItemCont}>
              <TouchableWithoutFeedback onPress={() => Linking.openURL('')}>
                <Text style={styles.listItem}>
                  {item.text}
                </Text>
                </TouchableWithoutFeedback> 
                <Button color= "#00BC8C" title="&#10006;" onPress={() => this.deleteTask(index)} />
              </View>
              <View style={styles.hr} />
            </View>}
        />
        <TextInput
          style={styles.textInput}
          onChangeText={this.changeTextHandler}
          onSubmitEditing={this.addTask}
          value={this.state.text}
          placeholder="+ add Node"
          returnKeyType="done"
          returnKeyLabel="done"
        />
      </View>
    );
  }
}

let Tasks = {
  convertToArrayOfObject(tasks, callback) {
    return callback(
      tasks ? tasks.split("||").map((task, i) => ({ key: i, text: task })) : []
    );
  },
  convertToStringWithSeparators(tasks) {
    return tasks.map(task => task.text).join("||");
  },
  all(callback) {
    return AsyncStorage.getItem("TASKS", (err, tasks) =>
      this.convertToArrayOfObject(tasks, callback)
    );
  },
  save(tasks) {
    AsyncStorage.setItem("TASKS", this.convertToStringWithSeparators(tasks));
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#252525",
    padding: viewPadding,
    paddingTop: 24
  },
  list: {
    width: "100%"
  },
  listItem: {
    paddingTop: 4,
    paddingBottom: 2,
    fontSize: 18,
    color:"#ffff"
  },
  hr: {
    height: 1,
    backgroundColor: "gray"
  },
  listItemCont: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingTop: 10,
  },
  textInput: {
    height: 40,
    paddingRight: 10,
    paddingLeft: 10,
    borderColor: "gray",
    borderWidth: isAndroid ? 0 : 1,
    width: "100%",
    color:"#ffff"
  },
appTitle: {
  alignItems:"center",
  justifyContent: "center",
  paddingBottom: 45,
  marginTop: 50,
  fontSize: 25,
  color:"#ffff"
}
});

AppRegistry.registerComponent("NodeList", () => NOdeList);

這是我的第二個屏幕，其中包含 WebView 的組件：

import React, { Component, useState } from "react";
import { BackHandler } from 'react-native';
import { WebView } from 'react-native-webview';
var $ = require( "jquery" );


export default class nodeView extends Component {

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

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

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

handleBackButton = ()=>{
   this.WEBVIEW_REF.current.goBack();
   return true;
}

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

render(){
   return (
    <WebView
        source={{ uri: `https://${user}:${password}@${domain}` }}
        ref={this.WEBVIEW_REF}
        style={{ marginTop: 20 }}
        onNavigationStateChange={this.onNavigationStateChange.bind(this)}
     />
    )

 }
}

Answer 1

創建 Web 視圖。 創建控制 WebView 的狀態。 將偵聽器添加到按鈕