Как я могу получить доступ к избыточному магазину с реагирующей навигацией? - PullRequest
Новая
       29

Как я могу получить доступ к избыточному магазину с реагирующей навигацией?

0 голосов
/ 19 февраля 2020

У меня есть приложение "Musi c App" для пользователей буксировки, типа "Гость, зарегистрированный пользователь"

У меня есть нижний навигатор для тех, когда Гость открывает мое приложение, я хочу сделать только 4 нижних вкладки "Домой, просмотр, поиск, радио".

, но когда пользователь входит / регистрируется, я хочу отобразить 5 вкладок ранее вкладок плюс вкладка "Библиотека".

SO

Я отправляю действие, когда пользователь register \ login , и изменяю состояние isLogin с false на true и выполняю некоторые действия, такие как добавление некоторых других данных в мой ящик, и оно появляется хорошо,

Я хочу получить доступ к избыточному хранилищу внутри файла реакции-навигации " Вкладки. js",

Я хочу состояние доступа из mapStateToProps, но я не могу получить доступ к this.props.isLogin из компонента, не относящегося к классу!

Так что я понятия не имею, как мне это сделать, если я не использую компонент Class!

Итак, есть ли способ получить доступ к хранилищу с помощью «connect HO C» внутри вкладок. js файл?

код

вкладок. * 106 6 * file 

import {connect} from 'react-redux';
import {store} from '../redux/store/store';

const LoginTabs = createBottomTabNavigator({....}); // For user '5 tabs'

const notLoginTabs = createBottomTabNavigator({....}); // For Guest '4 tabs'



const App = this.props.isLogin ? LoginTabs : notLoginTabs; // Not work i know :P

export default (createAppContainer(App));

EDIT For Drew Reese Ответ

Когда я пытаюсь сделать это таким образом, я получаю сообщение об ошибке 

const mapStateToProps = state => {
  console.log('state', state);
  return {
    isLogin: state.user.isLogin,
  };
};

const App = ({isLogin, ...props}) =>
  isLogin ? <LoginTabs {...props} /> : <NotLoginTabs {...props} />;
const Root = createAppContainer(App);

export default connect(mapStateToProps)(Root);

Ошибка message

В этом навигаторе есть как навигация, так и реквизиты контейнера, поэтому неясно, должен ли он владеть своим собственным состоянием. Удалите реквизиты: «isLogin, dispatch», если навигатор должен получить свое состояние из навигационной стойки. Если навигатор должен поддерживать свое собственное состояние, не передавайте навигационную опору.

То, что я пробовал

Я положил все стеки

"Ящик, Стеки, BottomTabs "

внутри одного файла" Компонент класса ", и это работает, но, как сказал @Drew, это не очень хорошая идея сделать это таким образом:)

Вот файл , если вы хотите его увидеть

Ответы [ 2 ]

2 голосов
/ 22 февраля 2020

Вам необходимо создать динамические c маршруты и один компонент, который отображает вкладки в зависимости от того, вошел ли пользователь в систему или нет. в Tabs.js выполните следующие действия. 

const loginRoutes = {
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
  Browse: {
    screen: Browse,
    navigationOptions: {
      title: 'Browse',
    },
  },
  Search: {
    screen: Search,
    navigationOptions: {
      title: 'Search',
    },
  },
  Radio: {
    screen: Radio,
    navigationOptions: {
      title: 'Radio',
    },
  },
  Library: {
    screen: Library,
    navigationOptions: {
      title: 'Library',
    },
  },
}

const noLoginRoutes = {
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
  Browse: {
    screen: Browse,
    navigationOptions: {
      title: 'Browse',
    },
  },
  Search: {
    screen: Search,
    navigationOptions: {
      title: 'Search',
    },
  },
  Radio: {
    screen: Radio,
    navigationOptions: {
      title: 'Radio',
    },
  }
}

const mapStateToProps = state => {
  return {
    isLogin: state.user.isLogin,
 };
};


 const AppNav = ({ isLogin }) => {
  const Container = createAppContainer(
    createDrawerNavigator(
      {
        ...drawerRoutes,
        App: createStackNavigator(
          {
            ...routes,
            Tabs: createBottomTabNavigator(
              isLogin ? loginRoutes : noLoginRoutes
            ),
          },
          routesConfig
        ),
      },
      drawerConfig
    )
  );

  return <Container />;
};

export default connect(mapStateToProps)(AppNav);

DEMO

0 голосов
/ 19 февраля 2020

Я думаю, что вы хотели сделать App компонентом. В этом случае это будет функциональный компонент, поэтому нет this, и вам также необходимо вернуть действительный JSX. 

const App = props => props.isLogin ? (
    <LoginTabs {...props} />
  ) : (
    <NotLoginTabs {...props} />
  );

Обратите внимание, что я PascalCase для компонента notLoginTabs, чтобы он был реагирующим, и возвращая их как JSX с props расширением.

Если дочерние компоненты не заботятся о isLogin, то деструктурируйте его перед передачей реквизита. Это очищает код и не передает ненужные реквизиты дочерним элементам. 

const App = ({ isLogin, ...props }) => isLogin ? (
    <LoginTabs {...props} />
  ) : (
    <NotLoginTabs {...props} />
  );

РЕДАКТИРОВАТЬ

Создайте компонент вкладок, в котором размещаются ваши аутентифицированные и не прошедшие аутентификацию вкладки. 

const LoginTabs = createBottomTabNavigator( ... );
const NotLoginTabs = createBottomTabNavigator( ... );

const Tabs = ({ isLogin, ...props }) => isLogin ? (
    <LoginTabs {...props} />
  ) : (
    <NotLoginTabs {...props} />
  );

const mapStateToProps = state => ({
  isLogin: state.user.isLogin,
});

export default AuthTabs = connect(mapStateToProps)(Tabs)

In AppTest

...
const AppNavigator = createStackNavigator(
  {
    TabHome: {
      screen: AuthTabs,
...
...