Пользовательский DrawerNavigator

Question

Я пытаюсь создать пользовательский DrawerNavigator, в котором элементы отображаются / скрываются в зависимости от состояния хранилища избыточности. Я новичок в реакции-нативной:)

Все мои попытки пока приводят к ошибке. Моя последняя попытка, как показывает 'Предоставление настраиваемого BoxContent' -Docs , заключалась в создании пользовательского контента, подобного этому (я изменил его на функциональный компонент)

    const MainDrawerNavigator = createDrawerNavigator();

    export const MainNavigator = state => {
    const user = useSelector(state => state.user.user);
//next console lines give different output , i also tried to use useEffect() function but no luck
      //   console.log("=================state===================");
      //   console.log(user);
      //   console.log("===================state=================");
    const dispatch = useDispatch();
    const isTrainer = useSelector(state => state.user.user.isTrainer) === null ? false : true);

      return (
        {isTrainer &&
          <MainDrawerNavigator.Screen
            name="AddUser"
            component={AddUserNavigator}
            options={{
              drawerIcon: props => (
                <Ionicons
                  name={Platform.OS === "android" ? "md-cart" : "ios-cart"}
                  size={23}
                  color={props.color}
                />
              )
            }}
          />
    }
          <MainDrawerNavigator.Screen
            name="Ereignis hinzufügen"
            component={MainNavigator}
            options={{
              drawerIcon: props => (
                <Ionicons
                  name={Platform.OS === "android" ? "md-cart" : "ios-cart"}
                  size={23}
                  color={props.color}
                />
              )
            }}
          />
          <MainDrawerNavigator.Screen
            title="Deine Daten"
            name="UserProfil"
            component={UserProfilNavigator}
            options={{
              drawerIcon: props => (
                <Ionicons
                  name={Platform.OS === "android" ? "md-person" : "md-person"}
                  size={23}
                  color={props.color}
                />
              )
            }}
          />
        </MainDrawerNavigator.Navigator>
      );
    };

Так что пользователь Журналы в хранилище приставок предназначены для пользовательских данных (все в порядке), и ящик должен учитывать роли, которые может иметь пользователь, и отображать только возможные маршруты. Надеюсь, я объяснил это ясно, и кто-то может дать подсказку в правильном направлении. Спасибо go

РЕДАКТИРОВАТЬ: я реализую это, используя следующий код

    import React from "react";
import { useSelector } from "react-redux";
import { NavigationContainer } from "@react-navigation/native";

import {
  MainNavigator,
AuthNavigator
} from "./MainNavigator";

const AppNavigator = props => {
  const isAuth = useSelector(state => !!state.auth.token);
  const didTryAutoLogin = useSelector(state => state.auth.didTryAutoLogin);

  return (
    <NavigationContainer>
      {isAuth && <MainNavigator />}
      {!isAuth && didTryAutoLogin && <AuthNavigator />}
    </NavigationContainer>
  );
};

export default AppNavigator;

и в основном приложении. js

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => {
          setFontLoaded(true);
        }}
      />
    );
  }
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
}

Answer 1

Если я прав, ты просто хочешь спрятать определенные предметы из ящика? Если да, проверьте, что мы используем ниже!

const Item = (props) => {
    return (
        <View>
            <TouchableNativeFeedback onPress={props.onPress}>
                    <Text>{props.title}</Text>
            </TouchableNativeFeedback>
        </View>
    );
};

const MyDrawer = () => {
    const [viewable, setViable] = useState({showScreen1: false, showScreen2: true});

    // Do some wizardry which determines what state to show
    // Yes yes... wizard... wohoo :D
    // Okay done now

    return (
        <Drawer.Navigator
            drawerContent={({navigation}) => (
                <SafeAreaView>
                    <ScrollView>
                        {
                            viewable.showScreen1 && (
                                <Item
                                    title="Some Screen 1"
                                    onPress={() => navigation.navigate('someScreen1')}
                                />
                            )
                        }
                        {
                            viewable.showScreen2 && (
                                <Item
                                    title="Some Screen 2"
                                    onPress={() => navigation.navigate('someScreen1')}
                                />
                            )
                        }
                    </ScrollView>
                </SafeAreaView>
            )}
            >
            <Drawer.Screen
                component={SomeScreen1}
                name="someScreen1"
            />
            <Drawer.Screen
                component={SomeScreen2}
                name="someScreen2"
            />
        </Drawer.Navigator>
    );
};

Обратите внимание, что я понятия не имею о redux, но я думаю, что вам удастся создать состояние и согласованные условия самостоятельно:)

Answer 2

Я думаю, что исходной проблемой было столкновение имен в переменной «состояние». Вы должны определить свою функцию выбора вне основной функции, чтобы она не пересчитывалась при каждом рендеринге. Хук useSelector предоставляет избыточное состояние функции селектора, он не передается MainNavigator в качестве реквизита. Вы также можете использовать один селектор для создания логического значения isTrainer:

// ensuring that user exists in state, and that user.user.isTrainer is true.
const selectUserIsTrainer = state => state.user.user && state.user.user.isTrainer


export const MainNavigator = ({...props}) => {
  const userIsTrainer = useSelector(selectUser)

  return userIsTrainer ? <TrainerNavigator /> : <NonTrainerNavigator />
}