2

我对在我的项目中使用 contentful 感到非常兴奋，但我无法让 JS 库在 react-native 项目中工作。

我收到以下错误： 在此处输入图像描述

我尝试了以下方法：

import contentful from 'contentful'; 
// or
var contentful = require('contentful');

您可以通过访问此 repo并按照我提供的步骤来重现该错误。

帮助将不胜感激。

4

3 回答 3

2

我正在维护 Contentful sdk。我整理了一个简单的示例，展示了如何在 React Native 中使用 SDK，您可以在此处查看 它基本上是从我们的示例空间之一获取项目列表并在 ListView.Check indes.ios中显示名称.js。看起来您机器中的缓存有问题。无论如何，我希望这会有所帮助。如果您有更多问题，请随时在我们的 github页面中创建问题

[更新]

您现在可以将 SDK 中使用的 axios 实例配置为使用不同的适配器。你可以在调用时传递它createClient

adapter: config => {
    config.adapter = null // this is important if it is passing to another axios instance
    // an http client combatible with React Native
    return fetch(config)
  }

最好的，

哈立德

于 2016-10-10T20:42:52.230 回答
0

我已经尝试了所有选项，但使用 Contentful SDK 将永远无法工作。

但是，您可以使用 REST 获取它并使用contentful库中的类型转换响应。

import axios from 'axios';
import {EntryCollection} from 'contentful';

import Env from '../Env';

const contentfulApi = 'https://cdn.contentful.com';

/**
 * Default locale used in contentful calls
 *
 * @see {@link getContentfulEntries}
 * @constant
 */
export const ContentfulLocale = 'sv';

/**
 * @typedef ContentfulProps
 * @param locale optional locale to use. Default is {@link ContentfulLocale}
 * @param entryType content type in contentful model
 */
type ContentfulProps = {
  entryType: string;
  locale?: string;
};
/**
 * Get entries from Contentful content API
 * @param props See {@link ContentfulProps}
 */
export const getContentfulEntries = async <T>(
  props: ContentfulProps,
): Promise<EntryCollection<T>> => {
  const client = axios.create({
    baseURL: `${contentfulApi}/spaces/${Env.CONTENTFUL_SPACEID}/environments/master/entries?`,
    timeout: 1000,
    headers: {Authorization: `Bearer ${Env.CONTENTFUL_TOKEN}`},
  });

  const result = await client.get<EntryCollection<T>>(
    '&content_type=' + props.entryType,
  );

  return result.data;
};

export default getContentfulEntries;
于 2020-12-06T10:03:35.083 回答
0

我认为在 React Native 中使用 Contentful API 的最佳方式是使用 Apollo 客户端和 graphQL 包。我也做了同样的工作并完成了它。

  • 安装 Apollo 客户端和 GraphQL npm 包

npm install @apollo/client graphql

  • 安装 react-native 异步存储来存储缓存

npm install @react-native-async-storage/async-storage

  • 安装 apollo cache persist 持久化缓存

npm install apollo3-cache-persist

可以阅读apollographql官方文档实现

  • app.tsx/.js在文件中创建 ApolloClient

import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

const cache = new InMemoryCache();

const client = new ApolloClient({
  uri: 'https://graphql.contentful.com/content/v1/spaces/{SPACE_ID}',
  cache,
  credentials: 'same-origin',
  headers: {
    Authorization: `Bearer {CDA-Access-Token}`,
  },
});

  • 将所有组件包裹在ApolloProvider

const App = () => {
  const [loadingCache, setLoadingCache] = useState(true);

  useEffect(() => {
    persistCache({
      cache,
      storage: AsyncStorage,
    }).then(() => setLoadingCache(false));
  }, []);

  if (loadingCache) {
    return <Loader />;
  }

  return (
    <ApolloProvider client={client}>
      <SafeAreaView style={{flex: 1}}>
        <Posts />
      </SafeAreaView>
    </ApolloProvider>
  );
};
export default App;

  • 导入gql和useQuery取数据

import { gql, useQuery } from '@apollo/client';

  • 现在，编写 GraphQL 查询

const QUERY_COLLECTION = gql`
  {
    postsCollection {
      items {
        title
        author
        publishDate
        inshorts
        featuredImage {
          url
        }
      }
    }
  }
`;

  • 使用 useQuery 函数获取数据

const { data, loading } = useQuery(QUERY_COLLECTION);

Contentful这就是从in获取数据的全部内容React Native App。要详细阅读此内容，请查看此帖子

于 2022-02-07T07:57:55.623 回答