React Native：找不到名称 RNCWebView 的视图配置

Question

error image

我正在尝试使用来自 react-native-webview 的 WebView，所以当我按下按钮时（renderItem 函数）它将从 api 给出的 link 打开一个 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 组件，这里我使用箭头函数而不是 class，这样我就可以传递来自 api 的 "navigation" 数据，这些数据是从 '../services/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 如何 linking react-native-webview 的问题。有时运行 react-native link react-native-webview 会解决问题。但有时它不会，有时它会说它成功但仍然没有正确地执行 link

如果 link 命令不起作用，您必须 link 手动

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

settings.gradle

rootProject.name = 'example' 包括 ':react-native-webview' project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')

包括“:app”
app/build.gradle

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 }
app/src/main/java/com/example/MainApplication.java

一个。添加此导入 import com.reactnativecommunity.webview.RNCWebViewPackage; b.确保 getPackages() 函数看起来像这样

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new RNCWebViewPackage()
  );
}

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

IOS Here 的完整教程 Android Here

的完整教程

Answer 2

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

React Native：找不到名称 RNCWebView 的视图配置

React Native: View Config not found for name RNCWebView

android

webview

reactjs

react-native