1

我正在尝试创建一个自定义 DrawerNavigator，其中根据 redux 存储状态显示/隐藏项目。我对 react-native 比较陌生 :)

到目前为止，我所有的尝试都会导致错误。正如“提供自定义抽屉内容”文档所示，我的最后一次尝试是创建这样的自定义内容（我将其更改为功能组件）

    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>
      );
    };

因此，用户登录 redux 存储是为了设置用户数据（一切正常），并且抽屉应该考虑用户可能拥有的角色并仅显示可能的路线。希望我解释清楚，有人可以给出正确方向的提示。谢谢英戈

编辑：我通过使用以下代码来实现这一点

    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;

并在主 App.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>
  );
}
4

2 回答 2

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但我认为您将设法自己创建状态和连贯条件:)

于 2020-03-19T05:05:05.167 回答
0

我认为最初的问题是“状态”变量上的名称冲突。你应该在主函数之外定义你的选择器函数，这样它就不会在每次渲染时重新计算。useSelector 钩子为选择器函数提供了 redux 状态，它没有作为道具提供给 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 />
}
于 2020-03-18T20:47:58.623 回答