Question

我正在尝试从react-native-webview使用WebView，所以当我按下按钮时（renderItem函数）它会从api给定的链接中打开一个webview，但是我尝试使用该webview出现了图像错误。

import React, { Component } from 'react';
import api from '../services/api';

import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

export default class Main extends Component {
    static navigationOptions = {
        title: "JSHunt"
    };

    state = {
      productInfo: {},
      docs: [],
      page: 1,
    };

    componentDidMount() {
      this.loadProducts();
    }

    loadProducts = async (page = 1) => {
      const response = await api.get(`/products?page=${page}`);

      const { docs, ...productInfo } = response.data;

      this.setState({ 
        docs: [... this.state.docs, ...docs], 
        productInfo,
        page
      });
    };

    loadMore = () => {
      const { page, productInfo } = this.state;

      if(page === productInfo.pages) return;

      const pageNumber = page + 1;

      this.loadProducts(pageNumber)
    };

    renderItem = ({ item }) => (
      <View style={styles.productContainer}>
        <Text style={styles.productTitle}>{item.title}</Text>
        <Text style={styles.productDescription}>{item.description}</Text>
        <TouchableOpacity style={styles.productButton}
         onPress={() => {
           this.props.navigation.navigate('Product', { product: item })
         }}>
          <Text style={styles.productButtonText}>Acessar</Text>
        </TouchableOpacity>
      </View>
    )

    render() {
        return(
          <View style={styles.container}>
            <FlatList contentContainerStyle={styles.list}
            data={this.state.docs} keyExtractor={item => item._id} renderItem={this.renderItem}
            onEndReached={this.loadMore}
            onEndReachedThreshold={0.1}/>
          </View>
        )
    }
}

WebView组件，这里我使用的是箭头函数而不是类，因此我可以传递从'../services/api';导入的api的“导航”数据；

import React from 'react';

import { WebView } from 'react-native-webview';

 const Product = ({ navigation }) => (
  <WebView source={{ uri: navigation.state.params.product.url}} />
);

Product.navigationOptions = ({ navigation }) => ({
  title: navigation.state.params.product.title
});

export default Product;

Answer 1

这是React Native如何链接react-native-webview的问题。有时运行<?php foreach ($recipe->get_authors() as $profile): $links[] = '<a href="' . $profile->get_url() . '">' . $profile->get_name() . '</a>'; endforeach; ?> <?= implode(', ', $links); ?>将解决问题。但是有时不成功，有时会说成功，但仍然无法正确链接

如果链接命令不起作用，则必须手动链接

您需要手动更改android文件夹中的3个文件。

settings.gradle

rootProject.name ='示例' 包括'：react-native-webview' project（'：react-native-webview'）。projectDir =新文件（rootProject.projectDir，'../ node_modules / react-native-webview / android'）

包括'：app'
app / build.gradle

react-native link react-native-webview
app / src / main / java / com / example / MainApplication.java

a。添加此导入dependencies { implementation project(':react-native-webview') implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}" implementation "com.facebook.react:react-native:+" // From node_modules } b。确保getPackages（）函数看起来像这样

import com.reactnativecommunity.webview.RNCWebViewPackage;

重建您的应用程序，它应该可以工作。

IOS Here的完整教程 Android Here

的完整教程

Answer 2

打开iOS pod文件->将react-native-webview引用添加到pod

React Native：找不到名称为RNCWebView

2 个答案: