android - react native : View Config not found for name RNCWebView

Question

error image

我正在尝试使用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 的问题。有时运行react-native链接react-native-webview可以解决问题。但有时不会，有时会说成功但仍然无法正确链接

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

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

1. settings.gradle

   rootProject.name = '示例' 包括':react-native-webview' 项目(':react-native-webview').projectDir = new File(rootProject.projectDir，'../node_modules/react-native-webview/android')

   包含“:app”

2. app/build.gradle

   依赖项{ 实现项目(':react-native-webview') 实现 fileTree(dir: "libs", include: ["*.jar"]) 实现“com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}” 实现 "com.facebook.react:react-native:+"//来自 节点模块 }

3. app/src/main/java/com/example/MainApplication.java

a.添加此导入 import com.reactnativecommunity.webview.RNCWebViewPackage; b.确保 getPackages() 函数如下所示

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

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

IOS Here 的完整教程 完整教程 Android Here