Как сделать контент доступным для премиум-класса React Native - PullRequest
Новая
       17

Как сделать контент доступным для премиум-класса React Native

0 голосов
/ 28 мая 2020

в моем приложении, поддерживающем реакцию, я хотел бы иметь премиум-контент для людей, оплативших подписку.

Моя проблема заключается в том, как я делаю контент для отображения недоступным (если вы не премиум-класса) и таким же, как и другой контент, если у вас премиум-класс. В основном я хотел бы, чтобы премиум-контент отображался с «блокировкой» на нем для обычных пользователей.

Однако я не знаю, как установить это условие. Это вопрос государства? Если да, то где расположить это состояние, учитывая, что оно однонаправленное?

Для ясности у меня будет контент премиум и не премиум

enter image description here enter image description here

1 Ответ

1 голос
/ 28 мая 2020

У меня была такая же проблема в проекте, я должен был показать экран, если пользователь был супервизором, и показать другой экран, если не был супервизором.

Я использовал react-dynamic-import, в основном я разделил свой основной проект состоит из 3 частей:

  1. Экран сотрудника - экран с доступом и компонентами, если пользователь не был супервизором.
  2. Экран супервизора - Экран с доступом и компонентами, если пользователь был супервизором.
  3. Экран по умолчанию - экран, который будет отображаться независимо от того, является ли пользователь супервизором или нет, и вытащите с помощью react-dynamic-import ваш обязательный экран, если пользователь был супервизором, я вытаскиваю экран супервизора, если не был супервизором, вытащите экран сотрудника

Вы можете сохранить ha sh в сеансе cook ie и прочитать этот cook ie в JS и проверить его с помощью REST API, и возврат REST API будет путь, где находится компонент Premium, например: 

// getting hash from cookie
const userHash = document.cookie.replace(/^.*;?user-hash=([^;]+);?.*$/, '$1');

// generate api LINK with
const apiLink = `/API/V1.0/checkuser?hash=${encodeURI(hash)}`;

/* getting value where are path is premium or isn't premium, in my case i'am using Ajax Request and my API returns a JSON like :
{"path": "pathWhereAreComponentPremium"}
*/
const pathComponent = (await $.get(apiLink)).path;

const loader = () => import(pathComponent);

// Load component dynamically
var Component = ReactDynamicImport({loader});

// ...

В Component - это компонент, если пользователь является премиум-классом или нет.

Редактировать 1: Простите мой engli * 1 039 *, я бразилец, и я учусь.

Редактировать 2:

Если вы хотите просто визуализировать компонент с помощью условного анализа, вы можете сделать это : 

const App = (props) => {

    const [isPremium, setPremium] = React.useState(false);

    const handleButtonPremium = () => (setPremium(!isPremium));

    return (<>
        <div>
            T-Shirt
            {isPremium ? <button>Get</button> : <button>Buy $1.5</button>}
        </div>
        <button onClick={handleButtonPremium}>
            {isPremium ? "Cancel Premium assign" : "Get Premium assign"}
        </button>
    </>)
}

Подробнее здесь

...