реагировать навигация v5 перейти из ящика пользовательский вид - PullRequest
Новая
       58

реагировать навигация v5 перейти из ящика пользовательский вид

0 голосов
/ 27 марта 2020

Я использую React Navigation V5, я хочу пользовательский ящик Навигационное содержимое, которое содержит изображение сверху и некоторые другие элементы навигации снизу

Вот мои элементы ящика:

  • Изображение (пользовательский вид)
  • Профиль
  • Продукты
  • Заказы

Вот мой код моего пользовательского содержимого ящика. 

export const CustomDrawerContent = props => {
return (
    <SafeAreaView style={styles.customDrawer}>
        <View
            style={{ flex: 1 }}
        >

            <DrawerContentScrollView {...props}>
                <TouchableNativeFeedback onPress={() => { console.log('go profile');  }}>
                    <View style={styles.userContainer}>
                        <View style={styles.imageContainer}>

                            <Image
                                style={styles.image}
                                source={{ uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTLCta_MQcJFd2kpz8HwXFm-6vxVqXzRUgCOIuhs94Q32GG8EeJ' }}
                            />
                        </View>
                        <Text style={styles.name}>Nguyen van Admin</Text>
                    </View>
                </TouchableNativeFeedback>

                <DrawerItemList {...props} />
            </DrawerContentScrollView>
            <DrawerItem
                label="Đăng xuất"
                style={{
                    borderWidth: 1,
                }}
                labelStyle={{
                    color: 'black'
                }}
                icon={({ focused, color, size }) => <Ionicons
                    size={23}
                    color={color}
                    name={Platform.OS === 'android' ? 'md-exit' : 'ios-exit-outline'}

                />}
            />
        </View>

    </SafeAreaView>
);
}

Так что, если экран профиля существовал в выдвижном ящике, нажав на изображение, я могу использовать 

props.navigate("profile")

Но если я уберу экран профиля из окон выдвижного ящика. Я не могу перейти к профилю больше. Как архивировать навигацию к экрану профиля, не добавляя его в экраны ящика?

Или Могу ли я скрыть элемент профиля из элементов ящика?

1 Ответ

1 голос
/ 31 марта 2020

Чтобы скрыть пункт меню из ящика, используйте Array.map (...) вместо в пользовательском содержимом ящика., 

{drawerItems.map((item, index) => {
return (
  <DrawerItem
    label={item.drawerLabel}
    onPress={() => props.navigation.navigate(item.routeName)}
  />
);
})}

и добавьте хук useEffect к содержимому настраиваемого ящика, как показано ниже, 

let [drawerItems, setDrawerItems] = useState([]);

useEffect(() => {
let drawerItemsList = [];
for (const key in props.descriptors) {
  if (props.descriptors.hasOwnProperty(key)) {
    if (!key.includes('profile')) {
      const element = props.descriptors[key];
      element.options.routeName = key.substring(0, key.indexOf('-'));
      drawerItemsList.push(element.options);
    }
  }
}
setDrawerItems(drawerItemsList);
}, []);

Другой подход., Создайте массив как показано ниже в пользовательском контенте ящика., 

const drawerItemsList = [
{
    drawerLabel: 'Products',
    drawerIcon: 'product',
    routeName: 'products',
    active: true,
},
{
    drawerLabel: 'Orders',
    drawerIcon: 'order',
    routeName: 'orders',
    active: false,
},
];

let [drawerItems, setDrawerItems] = useState(drawerItemsList);

и вместо использование как показано ниже. 

<View>
<FlatList 
    data={drawerItems} 
    keyExtractor={(item)=>item.routeName.trim()} 
    renderItem={({item,index})=>(
        <DrawerItem
            label={item.drawerLabel}
            icon={({color, size}) => <Ionicons name={item.drawerIcon} color={item.active?'#1e90ff':'#ccc'} size={size} />}
            labelStyle={[item.active?{color: '#1e90ff'}:{color: '#ccc'}]}
            style={item.active?{backgroundColor: '#1e90ff20'}:null}
            onPress={() => {
              drawerItemsList.forEach((element,i) => {
                i!==index?element.active=false:element.active=true
              });
              setDrawerItems(drawerItemsList)
              props.navigation.navigate(item.routeName)
            }}
        />
    )} 
/>
</View>
...