Я создал компонент заголовка и хочу открыть ящик оттуда

#android #reactjs #react-native

#Android #reactjs #реагировать -родной

Вопрос:

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

это js-код моего приложения, в котором я создал навигатор ящика

 <NavigationContainer>
          <Drawers.Navigator drawerContent={props => <Drawer {...props} />} >
            <Drawers.Screen
                  name="Home"
                  component={Home}
                  initialParams={({navigation}) => {
                    return{
                      headerTitle:() => <HomeHeader navigation={navigation}/>,
                    }
                  }}
                  
              />
            <Drawers.Screen
                name="Orders"
                component={Orders}
                
                
            />
             <Drawers.Screen
                name="Account"
                component={Account}
            />
            
        </Drawers.Navigator>
    </NavigationContainer>
     
 

и это мой компонент заголовка, в котором я пытался использовать navigation.openDrawer

 export default function HomeHeader({navigation}) {
    const openMenu = () => {
        navigation.openDrawer();
    }
    return (
        <View style={GlobalStyle.hheader} >
            <View style={GlobalStyle.mainMenu} >
                <Icon type="material" name="menu" size={26} color="black" onPress={openMenu} />
            </View>
            <View style={GlobalStyle.near} >
                <Text style={GlobalStyle.nTitle}>Your Location</Text>
                <Text style={GlobalStyle.nLocate}>Mehran Town <Icon   iconStyle={{ marginBottom:-1, }} name='chevron-down' size= {16}  type='font-awesome' color='#000' 
    /></Text>
            </View>
            
        </View>
    )
}
 

и, наконец, код draweritem

 <DrawerItem 
                        
                        label="Profile"
                        onPress={() => {props.navigation.navigate('Account')}}
                        labelStyle={{color: '#000', fontSize:15}}
                                                  
                        icon={() => (
                            <Icon 
                            name='account-circle'
                            type='material'
                            color='#4285F4'
                            size={18}
                            
                            />
                        )}
                    />
                <DrawerItem 
                        
                        label="Orders"
                        onPress={() => {props.navigation.navigate('Orders')}}
                        labelStyle={{color: '#000', fontSize:15}}
                        navigation={props.navigation}
                        icon={() => (
                            <Icon 
                            name='receipt'
                            type='material-icons'
                            color='#4285F4'
                            size={18}
                            
                            />
                        )}
                    />
         </View>
         
 

Комментарии:

1. Откуда берется компонент ящиков?

2. @ShamarYarde из кода элемента draweritem

3. @ShamarYarde из drawer.js файл

Ответ №1:

Я не думаю, что headerTitle — это место для возврата пользовательского меню заголовка.

Мое предложение: вы можете отобразить заголовок клиента в содержимом каждого экрана и использовать navigation.openDrawer(); или попробовать сначала создать представление оболочки для ящика и отобразить заголовок. Или создайте базовый экран с вашим пользовательским заголовком и наследованием для каждого вашего экрана. Но заголовок заголовка Я не думаю, что это сработает.

Комментарии:

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

2. Хорошо, вот так ваш пользовательский заголовок выглядит хорошо, давайте перейдем <HomeHeader navigation={navigation}/> к вашему главному экрану, экрану заказов, экрану учетной записи в рендеринге первого элемента и повторите попытку. Или вам нужно найти какой-нибудь шаблон проектирования для создания пользовательского заголовка в react navigation. Я просто отображаю пользовательский заголовок на экране содержимого, как мое предложение. Пример: <View> < HomeHeader navigation={navigation} /> {children}</View> // это код в методе рендеринга на главном экране

3. хорошо, спасибо, я все еще в замешательстве, но я разберусь. 🙂