如何解决React Native Drawer Navigator,如何添加图标和图像?
所以我刚刚在本机应用程序中创建了一个Drawer Navigator。
现在看起来像这样: IMAGE
现在,我想在文本前后添加前导和尾随图标。
我还想在顶部添加标题图片,在底部添加文本。
我该怎么做?有帮助吗?
这是我的App.js代码:
import 'react-native-gesture-handler';
import * as React from 'react';
import { Button,View,Text,TouchableOpacity,Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
import ThirdPage from './pages/ThirdPage';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const NavigationDrawerStructure = (props)=> {
//Structure for the navigatin Drawer
const toggleDrawer = () => {
//Props to open/close the drawer
props.navigationProps.toggleDrawer();
};
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={()=> toggleDrawer()}>
{/*Donute Button Image */}
<Image
source={{uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png'}}
style={{ width: 25,height: 25,marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
function firstScreenStack({ navigation }) {
return (
<Stack.Navigator initialRouteName="FirstPage">
<Stack.Screen
name="FirstPage"
component={FirstPage}
options={{
title: 'First Page',//Set Header Title
headerLeft: ()=> <NavigationDrawerStructure navigationProps={navigation} />,headerStyle: {
backgroundColor: '#f4511e',//Set Header color
},headerTintColor: '#fff',//Set Header text color
headerTitleStyle: {
fontWeight: 'bold',//Set Header text style
},}}
/>
</Stack.Navigator>
);
}
function secondScreenStack({ navigation }) {
return (
<Stack.Navigator initialRouteName="SecondPage">
<Stack.Screen
name="SecondPage"
component={SecondPage}
options={{
title: 'Second Page',}}
/>
</Stack.Navigator>
);
}
function thirdScreenStack({ navigation }) {
return (
<Stack.Navigator initialRouteName="ThirdPage">
<Stack.Screen
name="ThirdPage"
component={ThirdPage}
options={{
title: 'Third Page',}}
/>
</Stack.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#e91e63',itemStyle: { marginVertical: 5 },}}>
<Drawer.Screen
name="FirstPage"
options={{ drawerLabel: 'First page Option' }}
component={firstScreenStack} />
<Drawer.Screen
name="SecondPage"
options={{ drawerLabel: 'Second page Option' }}
component={secondScreenStack} />
<Drawer.Screen
name="ThirdPage"
options={{ drawerLabel: 'Third page Option' }}
component={thirdScreenStack} />
</Drawer.Navigator>
</NavigationContainer>
);
}
export default App;
如果有人帮助我,将非常感激:)
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。