Passing props to Custom Drawer Navigator in React

2019-07-14 19:53发布

站内问答 / JavaScript
624 2 6

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.

Extra Info: I'm getting this name from AsyncStorage in componentDidMount

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

2条回答
你好瞎i
2楼-- · 2019-07-14 20:03

You can use screenProps:

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

And then use it in your custom 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. If you don't know how to use Redux, I definitely recommend you to learn it. You will need it as your application grows.

查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
3楼-- · 2019-07-14 20:26

Just pass as screenprops 

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

You can access it from drawer like this this.props.screenprops.employeename

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)