这是一个逐步的教程，讲述了如何将OpenAI的ChatGpt API集成到React Native应用程序中。本教程假设您已经对JavaScript具有基本知识，并且对本机进行了反应。如果您是这些技术的新手，请首先考虑学习。

将Chatgpt API集成在React本地

先决条件

在开始之前，请确保有：

Node.js和NPM/YARN安装在您的计算机上。如果没有，请从here下载它们。
已安装了最新版本的React Native CLI。您可以通过运行npm install -g react-native-cli安装它。
OpenAI API键。您可以从Openai dashboard获得一个。

项目设置

首先创建一个新的反应本机项目：

npx react-native init chatGPTApp

然后，进入项目目录：

cd chatGPTApp

安装所需的库

我们将使用axios向Chatgpt API和react-native-dotenv提出HTTP请求来管理我们的环境变量（例如OpenAI API密钥）。使用以下方式安装这些库

npm install axios @react-native-community/dotenv

然后，要设置react-native-dotenv，将以下行添加到babel.config.js：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ["module:react-native-dotenv"]
  ]
};

现在，在项目的根目录中创建一个.env文件，并添加OpenAI API密钥：

OPENAI_KEY=your_api_key_here

设置ChatGPT API服务

在您的项目的根目录中创建一个名为ChatGPTService.js的新文件，并编写以下代码：

import axios from 'axios';
import { OPENAI_KEY } from '@env';

const instance = axios.create({
  baseURL: 'https://api.openai.com/v1/engines/davinci-codex/completions',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${OPENAI_KEY}`
  }
});

export const generateResponse = async (message) => {
  try {
    const response = await instance.post('', {
      prompt: message,
      max_tokens: 60
    });
    return response.data.choices[0].text;
  } catch (error) {
    console.error(error);
    return '';
  }
};

创建聊天界面

本教程并不专注于创建复杂的UI，因此，对于简洁起见，我们将使用TextInput创建一个简单的聊天界面，用于用户输入，而Button用于发送消息。

在您的App.js中，用：
替换样板代码

import React, { useState } from 'react';
import { View, TextInput, Button, Text, ScrollView } from 'react-native';

const App = () => {
  const [messages, setMessages] = useState([]);
  const [userInput, setUserInput] = useState('');

  const sendMessage = async () => {
    // Logic to send message will go here
  };

  return (
    <View>
      <ScrollView>
        {messages.map((msg, index) => (
          <Text key={index}>{msg}</Text>
        ))}
      </ScrollView>
      <View>
        <TextInput 
          value={userInput}
          onChangeText={setUserInput}
          placeholder="Type a message"
        />
        <Button title="Send" onPress={sendMessage} />
      </View>
    </View>
  );
};

export default App;

将界面与chatgpt服务连接

最后，我们需要将聊天接口与ChatGpt服务连接起来。将App.js中的sendMessage函数修改为：

import { generateResponse } from './ChatGPTService';

// ...previous code

const sendMessage = async () => {
  if (!userInput) return;

  setMessages(prevMessages => [...prevMessages, `User: ${userInput}`]);
  const botResponse = await generateResponse(userInput);
  setMessages(prevMessages => [...prevMessages, `ChatGPT: ${botResponse}`]);
  setUserInput('');
};

就是这样！您现在拥有与ChatGpt API集成的React Native应用程序。您可以根据目标平台使用npx react-native run-android或npx react-native run-ios运行应用。

记住要确保您的API密钥安全，并且不会在现实世界应用程序中将其公开。建议设置与OpenAI API通信的后端服务器，并且您的React Native应用程序应与此服务器进行通信。

如果您有兴趣跳过所有这些步骤并准备好使用模板，请查看Instamobile提供的此优质React Native ChatGPT app。