Блог

Я использую GetStream.io для моего приложения, именно для новостной ленты. Когда я просто пытаюсь вставить свой ключ api и токен прямо в компонент StreamApp, я получаю сообщение об ошибке, что я не могу использовать их публично, потому что есть риск, что кто-то может их украсть. Итак, я обнаружил, что нужно использовать пакет babel-plugin-transform-inline-environment-variables . Итак, вот как выглядит мой код:

 import React, { Component } from 'react';
import { StreamApp, FlatFeed, } from 'react-native-activity-feed';
import { Text, View, SafeAreaView } from "react-native";
import firebase from "react-native-firebase";
var stream = require('getstream');

export default class newsFeed extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   appid: process.env['REACT_APP_API_ID'],
   apptoken: process.env['REACT_APP_TOKEN'],
   apikey: process.env['REACT_APP_API_KEY']
 };
}

render() {
  return (
    <SafeAreaView style={{flex: 1}} forceInset={{ top: 'always' }}>
     <StreamApp
        apiKey={this.state.apikey}
        appId={this.state.appid}
        token={this.state.apptoken}
     />
    </SafeAreaView>
  )
 }
}
  

Как вы можете понять, переменные prcoess.env сохраняются в файле .env. Файл подключен к файлу .babelrc.

Проблема в том, что я получаю сообщение об ошибке: «Не удается прочитать свойство «данные»неопределенного».

В чем моя ошибка и как я могу ее исправить?

Поскольку вы используете клиентскую часть Stream (браузер), вам необходимо взаимодействовать с потоковыми API-интерфейсами, используя пользовательский токен вместо ключа api и секрета.

Пользовательские токены должны быть созданы в доверенной среде (например. ваш сервер / облачная функция), используя учетные данные вашего приложения и передаваемые вашему клиенту.

 var stream = require('getstream');

client = stream.connect(apiKey, apiSecret, appId);
const userToken = client.createUserToken('the-user-id');