在 React Navigation 中将 props 传递给 Custom Drawer Navigator答案

【问题标题】：Passing props to Custom Drawer Navigator in React Navigation在 React Navigation 中将 props 传递给 Custom Drawer Navigator
【发布时间】：2019-01-05 22:14:33
【问题描述】：

在反应导航抽屉菜单中。我想显示处于我的主要组件'Router' 状态的用户名“John Doe”我如何将其传递给 CustomDrawerContentComponent。

额外信息：我从 AsyncStorage 中获得这个名称组件DidMount

这是我的代码

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>
);

【问题讨论】：

标签： javascript react-native react-navigation

【解决方案1】：

你可以使用 screenProps：

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

然后在你的自定义 contentComponent 中使用它：

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

这是您问题的答案。但首先，我不建议将您的顶级组件用于此类业务逻辑。仅用于导航。

在这里查看我的答案：Customizing Drawer

我建议您按照我在回答中的描述创建一个 Redux 连接的自定义抽屉。如果你不知道如何使用 Redux，我绝对推荐你学习它。随着应用程序的增长，您将需要它。

【讨论】：

我面临着类似的问题，只是我需要从 contentComponent 到 home 的数据。你能帮帮我吗
你有更多关于重构抽屉的例子吗？

【解决方案2】：

只是作为 screenprops 传递

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

您可以像这样从抽屉中访问它this.props.screenprops.employeename

【讨论】：