React-Native 加入小组
navigation-drawer5.0 用法
import React from 'react';
import {View, Text} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
/**
* yarn add @react-navigation/drawer
* @react-navigation/native
*/
class Page1Screen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Page1Screen</Text>
</View>
);
}
}
class Page3Screen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Page3Screen</Text>
</View>
);
}
}
class Page2Screen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Page2Screen</Text>
</View>
);
}
}
class Page4Screen extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Page4Screen</Text>
</View>
);
}
}
const Drawer = createDrawerNavigator();
const MyDrawer = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Page1">
<Drawer.Screen
name="Page1"
component={Page1Screen}
options={{
drawerLabel: 'Page1Button',
drawerIcon: ({tintColor, focused}) => (
<MaterialIcon
name={'accessibility'}
size={24}
styel={tintColor}
/>
),
}}
/>
<Drawer.Screen
name="Page2"
component={Page2Screen}
options={{
drawerLabel: 'Page2Button',
drawerIcon: ({tintColor, focused}) => (
<MaterialIcon name={'add-alert'} size={24} styel={tintColor} />
),
}}
/>
<Drawer.Screen
name="Page3"
component={Page2Screen}
options={{
drawerLabel: 'Page3Button',
drawerIcon: ({tintColor, focused}) => (
<MaterialIcon name={'add-to-queue'} size={24} styel={tintColor} />
),
}}
/>
<Drawer.Screen
name="Page4"
component={Page2Screen}
options={{
drawerLabel: 'Page4Button',
drawerIcon: ({tintColor, focused}) => (
<MaterialIcon name={'android'} size={24} styel={tintColor} />
),
}}
/>
</Drawer.Navigator>
</NavigationContainer>
);
};
export default MyDrawer;
