从反应导航抽屉菜单项

Question

如何通过Drawer菜单项将参数传递给我的组件？

我尝试了this并成功了，但是它覆盖了我在组件内部定义的导航选项。

我的代码：

导航

const Stack = {
  Login: {
    screen: Login
  },
  Search: {
    screen: Search
  },
  Add: {
    screen: Add
  }
}


const DrawerRoutes = {
  Login: {
    name: 'Login',
    screen: Login
  },
  'Search Vegan': {
    name: 'Search',
    screen: StackNavigator(Stack.Search, {
      headerMode: 'none'
    }),
    navigationOptions: ({ navigation }) => ({
      drawerIcon: SearchMenuIcon(navigation)
    })
  },
  'Add vegan': {
    name: 'Add',
    screen: StackNavigator(Stack.Add, {
      headerMode: 'none'
    }),
    navigationOptions: ({ navigation }) => ({
      drawerIcon: AddMenuIcon(navigation)
    })
  }
}

const CustomDrawerContentComponent = props => (
  <SafeAreaView style={{ flex: 1, backgroundColor: '#3f3f3f', color: 'white' }}>
    <View>
      <Image
        style={{
          marginLeft: 20,
          marginBottom: 0,
          marginTop: 0,
          width: 100,
          height: 100,
          resizeMode: 'contain'
        }}
        square
        source={require('../../images/logo_v_white.png')}
      />
    </View>
    <DrawerItems {...props} />
  </SafeAreaView>
)

const Menu = StackNavigator(
    {
      Drawer: {
        name: 'Drawer',
        screen: DrawerNavigator(DrawerRoutes, {
          initialRouteName: 'Login',
          drawerPosition: 'left',
          contentComponent: CustomDrawerContentComponent,
          contentOptions: {
            activeTintColor: '#27a562',
            inactiveTintColor: 'white',
            activeBackgroundColor: '#3a3a3a'
          }
        })
      }
    },
    {
      headerMode: 'none',
      initialRouteName: 'Drawer'
    }
  )


export default Menu

具有导航选项的登录组件：

const mapDispatchToProps = (dispatch: Dispatch<*>): Object => {
  return bindActionCreators(
    {
      fetchUserDetailsFulfilled: fetchUserDetailsFulfilled,
      fetchUserDetailsRejected: fetchUserDetailsRejected
    },
    dispatch
  )
}

const mapStateToProps = (state: State): Object => {
  return {
    userId: state.user.details.id,
    userFirstName: state.user.details.first_name
  }
}

const LoginMenuIcon = ({ navigate }) => (
  <Icon
    name="user"
    size={30}
    style={{ fontWeight: '900' }}
    color="#FFF"
    onPress={() => navigate('DrawerOpen', { shouldNavigate: false })}
  />
)

class LoginView extends Component {

  getUserDetails = getUserDetails

  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state

    return {
      title: params ? params.userFirstName : 'Login',
      drawerIcon: LoginMenuIcon(navigation)
    }
  }

  constructor(props) {
    super(props)
    this.buttonPress = this.buttonPress.bind(this)
    console.log(this.props)
  }

  componentDidMount() {
    AccessToken.getCurrentAccessToken().then(
      () => {
        this.getUserDetails(this.props, true)
      }
    )
  }

  buttonPress() {
    this.props.navigation.navigate('Search Vegan')
  }

  render() {

    return (
      <Container style={{ backgroundColor: '#27a562' }}>
        <View>
          <Button
            style={{ 
              marginLeft: 10, 
              marginTop: 10
            }}
            transparent
            onPress={() => this.props.navigation.openDrawer()}>
            <Icon
              name="navicon"
              style={{
                color: '#F0DFDF',
                fontSize: 36
              }}
            />
          </Button>
        </View>
        <Container
          style={{
            flex: 1,
            height: '100%',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center'
          }}>
          <Image
            style={{
              width: 200,
              height: 200,
              marginBottom: 70,
              resizeMode: 'contain'
            }}
            square
            source={require('../../../images/logo_white.png')}
          />
          <FBLoginButton />
          {!this.props.userId && (
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center'
              }}>
              <Text
                style={{
                  color: '#FFF',
                  marginTop: 20,
                  marginBottom: 20
                }}>
                OR
              </Text>
              <Button
                block
                style={{
                  ...styles.labelHeight,
                  borderRadius: 4,
                  borderWidth: 0.5,
                  borderColor: '#FFF',
                  width: 250,
                  marginLeft: 'auto',
                  marginRight: 'auto',
                  backgroundColor: 'transparent'
                }}
                onPress={this.buttonPress}>
                <Text style={{ fontSize: 13.5 }}>Continue without Login</Text>
              </Button>
            </View>
          )}
        </Container>
      </Container>
    )
  }
}

const LoginViewComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(LoginView)

export default withNavigation(LoginViewComponent)