Блог

Я хочу, чтобы компоненты считывались или редактировались на основе авторизации. Пример

 const auth = "read" || "edit"
 

если аутентификация прочитана, пользователи могут разрешить только чтение компонента. Если авторизация изменена, пользователь может разрешить редактировать компонент.

Как обернуть весь компонент в глобальную специальную функцию и на основе аутентификации, как перемещаться.

Навигационный контейнер

 
<Stack.Navigator initialRouteName="LoginComponent">
      <Stack.Screen
        name="LoginScreen"
        component={LoginComponent}
        options={{
          headerShown: false,
          gestureEnabled: false,
        }}
      />
 <Stack.Screen
        name="Upload"
        component={Uploadcompoenent}
        options={{
          headerShown: false,
          gestureEnabled: false,
        }}
      />
</Stack.Navigator>
 

состояние

1.давайте рассмотрим, может ли супервайзер пользователя загрузить новое изображение. 2.если пользователь является помощником руководителя, он может читать только экран. для помощника руководителя опция загрузки отключена.

Я хочу поместить все компоненты в одну специальную функцию, основанную на том, что пользователь auth может прочитать или загрузить изображение.

Спасибо,

Любые зацепки будут оценены по достоинству 🙂

Рассматривая компонент <Stack.Navigator/> как СПЕЦИАЛЬНЫЙ, который будет отображать пару дочерних элементов.

Внутри компонента Stack.Navigator у вас будет значение auth, которое можно передать всем дочерним компонентам с помощью React.Дети.составьте карту таким образом:

 export default function ParentComp(props) {
  const auth = 'edit';

  return React.Children.map(props.children, (child, i) => {
    let el = React.cloneElement(child, {
      auth
    });
    return el;
  });
}
 

Таким образом, ваши дочерние компоненты примут ваше состояние аутентификации в качестве реквизитов, которые будут использоваться для блокировки определенных событий в вашем дочернем компоненте.

 export default function ChildComp(props) {
  return (
    <div>
      component is only {props.auth} {props.test}
    </div>
  );
}