如何在 react native 中使用 node/npm 包(oxford-dictionary)

Question

我正在尝试在反应原生中使用npm牛津词典包，我安装了"npm 安装牛津词典"并在终端上将此文件作为"节点应用程序.js"运行并且工作正常，但是，当我尝试在 react native 中使用它不起作用时，谁能帮我出什么问题。是否可以仅使用反应本机使用此 api，或者我必须使用 nodejs 构建后端？

应用.js

var Dictionary = require("oxford-dictionary");    
var config = {
 app_id : "-------",
 app_key : "--------",
 source_lang : "en"
};
      
var dict = new Dictionary(config);
var props = {
 word: "stupendous",
};

var oxfordApi = {
getRovers(){
 var lookup = dict.synonyms(props);
 return fetch(lookup).then((res) => res.json());
  }
  }


      import React from 'react';
      import { StyleSheet, Text, View } from 'react-native';
      //import oxfordApi from './oxfordApi';
      import globals from 'node-libs-react-native/globals';
           var Dictionary = require("oxford-dictionary");  
           var config = {
           app_id : "-------",
           app_key : "--------------------------",
        source_lang : "en"
      };
      
       export default class App extends React.Component {

     constructor(props) {
      super(props);
       this.state = {
         rovers: []
          }
        }
     componentWillMount() {
     var dict = new Dictionary(config);
      var lookup = dict.find("awesome");
       lookup.then((res) => {
         this.setState({
           rovers: res.rovers
           })
          });
          }
        render() {
        console.log("Rovers: ", this.state.rovers);
         return (
           <View style={styles.container}>
          <Text>Hello wordl</Text>
          </View>
           );
         }
             }
       const styles = StyleSheet.create({
      container: {
       flex: 1,
           backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
            },
            });

结果当我运行"运行 npm ios"

"node_modules/oxford-dictionary/index.js"中的软件包试图导入 Node 标准库模块 "https"。它失败了，因为 React Native 不包含 Node 标准库。阅读更多内容 https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo

Answer 1

不幸的是，

由于您已经非常正确地标识了该 npm 包，因此不能将该 npm 包与 react-native一起使用，因为它没有https模块。

但是，查看包oxford-dictionary它是一个文件，它提供了一些帮助程序方法来构造对牛津词典 API 的特定网络请求。

根据

fetch重写这些内容并制作自己的帮助程序文件并不难。您甚至可以为 Oxford Dictionary api 创建自己的 react-native 包并将其发布到 npm。

关于访问牛津词典的api，这样做应该没有问题，因为它只是网络请求。 fetch应该能够应付它。您只是无法使用 oxford-dictionary npm 包来发出请求。

Answer 2

我重写了包，方法并将其发布到npm。 反应原生牛津词典