有没有办法把 `options` 变成像 `navigationOptions` 一样的函数?
Is there anyway to turn `options` into a function same like `navigationOptions` do?
目前,我正在上一门课程:Multiplatform Mobile App Development with React Native 在 coursera 中,每次讲座后我都被卡住了,因为讲师使用 react-navigation@2.0.1
但我想确保学习最新版本(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
可以是对象,也可以是接受 props 的函数。
我转换成这样,
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
功能转换为我的代码感到困惑。因为他们的 docs 没有告诉我如何将我的 options
对象变成一个函数来带来 navigation
prop?
还有一件事是他正在使用 drawerIcon
,
const MainNavigator = createDrawerNavigator(
{
navigationOptions: {
drawerLabel: 'Login',
drawerIcon: ({ tintColor }) => (
<Icon
name="sign-in"
type="font-awesome"
size={24}
color={tintColor}
/>
),
}
...
但我在抽屉导航中没有找到任何相关的drawerIcon
docs
如果有人帮我解决这个问题,我衷心感谢。
首先,options prop can be used to configure individual screens inside the navigator. And headerLeft is a function that returns a React element to display on the left side of the header. When a function is used, it receives several arguments when rendered (onPress, label, labelStyle, and more - check types.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
}
/>
)
}
}
目前,我正在上一门课程:Multiplatform Mobile App Development with React Native 在 coursera 中,每次讲座后我都被卡住了,因为讲师使用 react-navigation@2.0.1
但我想确保学习最新版本(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
可以是对象,也可以是接受 props 的函数。
我转换成这样,
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
功能转换为我的代码感到困惑。因为他们的 docs 没有告诉我如何将我的 options
对象变成一个函数来带来 navigation
prop?
还有一件事是他正在使用 drawerIcon
,
const MainNavigator = createDrawerNavigator(
{
navigationOptions: {
drawerLabel: 'Login',
drawerIcon: ({ tintColor }) => (
<Icon
name="sign-in"
type="font-awesome"
size={24}
color={tintColor}
/>
),
}
...
但我在抽屉导航中没有找到任何相关的drawerIcon
docs
如果有人帮我解决这个问题,我衷心感谢。
首先,options prop can be used to configure individual screens inside the navigator. And headerLeft is a function that returns a React element to display on the left side of the header. When a function is used, it receives several arguments when rendered (onPress, label, labelStyle, and more - check types.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
}
/>
)
}
}