在React Navigation中將道具傳遞到Custom Drawer Navigator

Question

在反應導航抽屜菜單中。 我想顯示用戶名'John Doe'，該用戶名處於我的主要組件'Router'的狀態下'Router'如何傳遞CustomDrawerContentComponent。

額外信息：我從componentDidMount中的AsyncStorage獲得此名稱

這是我的代碼

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

您可以使用screenProps：

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

然后在自定義contentComponent中使用它：

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

這是您的問題的答案。 但是首先，我不建議您將頂級組件用於此類業務邏輯。 僅用於導航。

並在這里查看我的答案：自定義抽屜

我建議您按照答案中的說明創建一個Redux連接的自定義抽屜。 如果您不知道如何使用Redux，我絕對建議您學習它。 隨着應用程序的增長，您將需要它。

Answer 2

只是作為screenprops通過

Render(){
return <Myapp screenprops={employeename:this.state.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