目前,我正在学习一门课程。多平台移动应用开发与React Native。 在coursera,我被卡在后,每一个讲座,因为教师使用。[email protected]
但我想确保学习最新的版本(v5)。在这个讲座中,他创建了一个堆栈导航器,并将一个图标带到屏幕上,如。
import {createStackNavigator} from 'react-navigation';
import { Icon } from 'react-native-elements';
const MenuNavigator = createStackNavigator(
{
Menu: {
screen: Menu,
navigationOptions: ({ navigation }) => ({
headerLeft: (
<Icon
name="menu"
size={24}
color="white"
onPress={() => navigation.toggleDrawer()}
/>
),
}),
},
Dishdetail: { screen: Dishdetail },
},
{
initialRouteName: 'Menu'
}
);
哪儿 navigationOptions
可以是一个对象,也可以是一个接收道具的函数。
我把它转换为:
import { createStackNavigator } from '@react-navigation/stack';
import { Icon } from 'react-native-elements';
const MenuNavigator = createStackNavigator();
function MenuNavigatorScreen() {
return (
<MenuNavigator.Navigator
initialRouteName="Menu"
screenOptions={HeaderOptions}
>
<MenuNavigator.Screen
name="Menu"
component={Menu}
/>
<MenuNavigator.Screen
name="Dishdetail"
component={Dishdetail}
options={{ headerTitle: 'Dish Detail' }}
/>
</MenuNavigator.Navigator>
);
}
但我很困惑如何将 navigationOptions
功能到我的代码中。因为他们的 文件 没有告诉如何截断我的 options
对象到一个函数中,将 navigation
道具?
还有一件事就是他用的是 drawerIcon
,
const MainNavigator = createDrawerNavigator(
{
navigationOptions: {
drawerLabel: 'Login',
drawerIcon: ({ tintColor }) => (
<Icon
name="sign-in"
type="font-awesome"
size={24}
color={tintColor}
/>
),
}
...
但我没有找到任何相关的东西 drawerIcon
在抽屉导航中 文件 如果有谁能帮我解决这个问题,我衷心感谢。
首先,我想说的是 选项 道具可用于配置导航器内的各个屏幕。而 headerLeft 是一个返回一个React元素显示在头部左侧的函数。当使用一个函数时,当渲染时,它将接收几个参数(onPress,label,labelStyle,以及更多--查看 类型.tsx 完整的名单)。)
options = {
({
navigation
}) => ({
headerLeft: () => ( <
Icon name = 'menu'
size = {
24
}
color = 'white'
onPress = {
() =>
navigation.toggleDrawer()
}
/>
)
})
}
而对于 drawerIcon
使用。
options = {
{
drawerIcon: ({
tintColor
}) => ( <
Icon name = 'home'
type = 'font-awesome'
size = {
24
}
color = {
tintColor
}
/>
)
}
}