在React Navigation中将道具传递到Custom Drawer Navigator

Question

In react navigation drawermenu. 在反应导航抽屉菜单中。 I want to display the username 'John Doe' which is in the state of my main component 'Router' How can I pass it the CustomDrawerContentComponent. 我想显示用户名'John Doe'，该用户名处于我的主要组件'Router'的状态下'Router'如何传递CustomDrawerContentComponent。

Extra Info: I'm getting this name from AsyncStorage in componentDidMount 额外信息：我从componentDidMount中的AsyncStorage获得此名称

This is my code 这是我的代码

export default class Router extends Component {
  constructor(props) {
    super(props);
    this.state = {
      employeeName: "John Doe" //<-----How to pass this name to CustomDrawerContentComponent????
    };
  }

  render() {
    return <MyApp />;
  }
}

const MyApp = DrawerNavigator(
  {
    Home: {
      screen: Home
    },
    History: {
      screen: History
    },
    AddDetails: {
      screen: AddDetails
    }
  },
  {
    initialRouteName: "Home",
    drawerPosition: "left",
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: "DrawerOpen",
    drawerCloseRoute: "DrawerClose",
    drawerToggleRoute: "DrawerToggle",
    contentOptions: {
      activeTintColor: "#EF4036"
    }
  }
);

const CustomDrawerContentComponent = props => (
  <Container>
    <Header style={styles.drawerHeader}>
      <Body style={styles.container}>
        <Image
          style={styles.drawerImage}
          source={{
            uri: "http://themes.themewaves.com/nuzi/wp-content/uploads/sites/4/2013/05/Team-Member-3.jpg"
          }}
        />
        <Text style={styles.drawerText}>**How get the name here?**</Text>
      </Body>
    </Header>

    <Content>
      <DrawerItems {...props} />
    </Content>
  </Container>
);

Answer 1

You can use screenProps: 您可以使用screenProps：

<MyApp
  screenProps={{employeeName: this.state.employeeName}}
/>

And then use it in your custom contentComponent: 然后在自定义contentComponent中使用它：

contentComponent:(props)=>(
  <View>
    <Text>{props.screenProps.employeeName}</Text>
    <DrawerItems {...props} />
  </View>
)

This is the answer for your question. 这是您的问题的答案。 But first of all I don't recommend using your top level component for such business logic. 但是首先，我不建议您将顶级组件用于此类业务逻辑。 Use it only for navigation. 仅用于导航。

And see my answer here: Customizing Drawer 并在这里查看我的答案：自定义抽屉

I recommend you to create a Redux connected custom drawer as I describe in my answer. 我建议您按照答案中的说明创建一个Redux连接的自定义抽屉。 If you don't know how to use Redux, I definitely recommend you to learn it. 如果您不知道如何使用Redux，我绝对建议您学习它。 You will need it as your application grows. 随着应用程序的增长，您将需要它。

Answer 2

Just pass as screenprops 只是作为screenprops通过

Render(){
return <Myapp screenprops={employeename:this.state.employeeName}/>;
}

You can access it from drawer like this this.props.screenprops.employeename 您可以像这样从抽屉访问它this.props.screenprops.employeename

在React Navigation中将道具传递到Custom Drawer Navigator

问题描述

2 个解决方案

解决方案1
3 已采纳 2018-07-29 23:15:17

解决方案2
3 2018-07-30 02:48:16

在React Navigation中将道具传递到Custom Drawer Navigator

问题描述

2 个解决方案

解决方案1 3 已采纳 2018-07-29 23:15:17

解决方案2 3 2018-07-30 02:48:16

解决方案1
3 已采纳 2018-07-29 23:15:17

解决方案2
3 2018-07-30 02:48:16