javascript - Passing props with screen option in DrawerNavigator - Stack Overflow

admin管理员组

文章数量:1287633

I am using DrawerNavigator in .

const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications: {
        screen: MyNotificationsScreen,
    },
});

I have multiple screens that are using MyNotificationsScreen ponent with different props.

How can I do something like:

const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications1: {
        screen: MyNotificationsScreen(propName=val1),
    },
    Notifications2: {
        screen: MyNotificationsScreen(propName=val2),
    },
});

I am using DrawerNavigator in https://reactnavigation/docs/navigators/drawer.

const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications: {
        screen: MyNotificationsScreen,
    },
});

I have multiple screens that are using MyNotificationsScreen ponent with different props.

How can I do something like:

const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications1: {
        screen: MyNotificationsScreen(propName=val1),
    },
    Notifications2: {
        screen: MyNotificationsScreen(propName=val2),
    },
});

• javascript
• reactjs
• react-navigation

Share Improve this question Follow edited May 29, 2017 at 20:42 Hristo Eftimov 15.8k1414 gold badges5454 silver badges7979 bronze badges asked May 29, 2017 at 18:15 AdamAdam 3,1381111 gold badges4848 silver badges8080 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

Better way in many cases I think:

screen: (props) => <MyNotificationsScreen {...props} propName={val1} />

This will put your nav props in props.navigation.state.params. If you want them to appear in this.props instead (which will mean your ponent is not tightly coupled to react-navigation) then use:

screen: (props) => <MyNotificationsScreen {...props.navigation.state.params} propName={val1} />

You do have two options here:

1- You pass the parameter in the 'navigate call':

this.props.navigation.navigate('Notifications1', {propName: 'val1'})

2- The other way around is to create Notifications1

class Notifications1 
{
  render ( )
  {
    return <MyNotificationsScreen propName="val1" />
  }
}

本文标签： javascriptPassing props with screen option in DrawerNavigatorStack Overflow