React Native Navigation Drawer с некоторыми базовыми функциями!
Итак, мы собираемся создать навигационный ящик здесь, но перед этим вам нужно сначала установить некоторые зависимости.
1. react-navigation 2. react-navigation-drawer 3. react-navigation-stack
Структура проекта
Contect.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class ContectScreen extends Component {
render() {
return (
<View style={{ alignItems: 'center' }}>
<Text>ContectScreen</Text>
</View>
);
}
}
Таким образом, этот же код вы можете написать в List.js , Profile.js , Notification.js , Logout.js , но с другим именем в текстовом теге.
теперь мы собираемся создать файл App.js, в котором мы напишем фактический код навигации для ящика.
App.js
import React, { Component } from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import {
SafeAreaView,
ScrollView,
View,
Text,
ImageBackground,
Image,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import LandingScreen from './components/Landing';
import HomeScreen from './components/Home';
import ContectScreen from './components/Contect';
import ListScreen from './components/List';
import LogoutScreen from './components/Logout';
export default class App extends Component {
render() {
return <AppContainer />;
}
}
const LandingStackNavigator = createStackNavigator(
{
Profile: LandingScreen,
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
),
};
},
}
);
const HomeStackNavigator = createStackNavigator(
{
Notification: HomeScreen,
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
),
};
},
}
);
const ContectStackNavigator = createStackNavigator(
{
Contect: ContectScreen,
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
),
};
},
}
);
const ListStackNavigator = createStackNavigator(
{
List: ListScreen,
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
),
};
},
}
);
const LogoutStackNavigator = createStackNavigator(
{
Logout: LogoutScreen,
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
),
};
},
}
);
const DrawerNavigator = createDrawerNavigator(
{
Profile: {
screen: LandingStackNavigator,
navigationOptions: {
drawerIcon: ({ tintColor }) => (
<Icon name="user" size={16} color={tintColor} />
),
},
},
Notification: {
screen: HomeStackNavigator,
navigationOptions: {
drawerIcon: ({ tintColor }) => (
<Icon name="user" size={16} color={tintColor} />
),
},
},
Contect: {
screen: ContectStackNavigator,
navigationOptions: {
drawerIcon: ({ tintColor }) => (
<Icon name="user" size={16} color={tintColor} />
),
},
},
List: {
screen: ListStackNavigator,
navigationOptions: {
drawerIcon: ({ tintColor }) => (
<Icon name="user" size={16} color={tintColor} />
),
},
},
Logout: {
screen: LogoutStackNavigator,
navigationOptions: {
drawerIcon: ({ tintColor }) => (
<Icon name="user" size={16} color={tintColor} />
),
},
},
},
{
contentComponent: props => (
<ScrollView style={{ flex: 1 }}>
<ImageBackground
source={require('./assets/images.jpg')}
style={{ width: undefined, padding: 16, paddingTop: 48 }}>
<Image
source={require('./assets/back.png')}
style={{
width: 80,
height: 80,
borderRadius: 40,
borderWidth: 3,
borderColor: '#FFF',
}}
/>
</ImageBackground>
<View style={{ flex: 1 }}>
<DrawerItems {...props} />
</View>
</ScrollView>
),
}
);
const navigator = createSwitchNavigator({
Profile: {
screen: DrawerNavigator,
},
Notification: {
screen: HomeScreen,
},
});
const AppContainer = createAppContainer(navigator);
в App.js DrawerNavigator — бесполезная часть для перехода с одного экрана на другой с помощью навигационного Drawer.
если вы столкнулись с какой-либо ошибкой, отправьте сообщение Здесь
поэтому надеюсь, что вы понимаете эту концепцию!
Подпишитесь на мой Канал YouTube, чтобы узнать больше
ВЫВОД:
