Я на ReactNative и использую нативную базу и реагирующую навигацию npm.
Я получил это, и мой вопрос в том, как я могу иметь заголовок, вплоть до кнопки «Домой», я просмотрел документацию по реакции-навигации, но на самом деле это не ясно.
Вот так (изображение исправлено, здесь просто поставить логотип)
Вы можете реализовать пользовательский компонент содержимого для ящика. Там вы также можете просто отображать элементы навигации, используя DrawerItems. Например:
import React from 'react'
import { Text, View } from 'react-native'
import { DrawerItems, DrawerNavigation } from 'react-navigation'
const DrawerContent = (props) => (
<View>
<View
style={{
backgroundColor: '#f50057',
height: 140,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ color: 'white', fontSize: 30 }}>
Header
</Text>
</View>
<DrawerItems {...props} />
</View>
)
const Navigation = DrawerNavigator({
// ... your screens
}, {
// define customComponent here
contentComponent: DrawerContent,
})
Для навигации по ящикам вы можете добавить свои собственные верхний и нижний колонтитулы и создать свои собственные стили с помощью contentComponent конфигурации:
сначала import { DrawerItems, DrawerNavigation } from 'react-navigation' затем
Заголовок перед DrawerItems:
contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView> .
Нижний колонтитул после DrawerItems:
contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView> .
Вы можете добиться этого с помощью параметра contentComponent в конфигурации навигации ящика. Вы можете сделать это двумя способами в зависимости от требуемого уровня конфигурации:
Способ 1.
DrawerItems из react-navigation (обрабатывает навигацию самостоятельно) -
import {DrawerItems, DrawerNavigation} from 'react-navigation';
export default DrawerNavigator({
// ... your screens
}, {
// define customComponent here
contentComponent: (props) =>
<View style={{flex: 1}}>
<Text>Header</Text>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</View>
});
Это создает фиксированный заголовок с прокруткой для пунктов меню под ним.
Способ 2.
Создание собственного пользовательского компонента –
import { DrawerNavigation } from 'react-navigation'
export default DrawerNavigator({
// ... your screens
}, {
// define customComponent here
contentComponent: props => <SideMenu {...props}>
});
Здесь SideMenu — это ваш собственный компонент для отображения в ящике. Вы можете использовать реагирующую навигацию NavigationActions.navigate(screen) для обработки маршрутизации при нажатии элементов меню.
Более подробное объяснение второго метода https://medium.com/@kakul.gupta009/custom-drawer-using-react-navigation-80abbab489f7
вложенный навигатор должен быть таким:
const Router = StackNavigator({
Home: {screen: HomeScreen},
Test: {screen: TestScreen}
}, {
navigationOptions: {
headerStyle: {backgroundColor: '#2980b9'},
headerTintColor: '#fff'
}
});
const Drawer = DrawerNavigator({
App: {screen: Router}
});
для пользовательского интерфейса:
