#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. хорошо, спасибо, я все еще в замешательстве, но я разберусь. 🙂